どのように反応を/トースト反応を使用して作成する

概要
最も重要なコンポーネントの一つは、ユーザーとより効果的に何かを伝えるための通知です.明らかにいくつかの種類の通知があり、いくつかの他の特定の操作を通信することができます警告することができます.そして、彼らの解剖学は多くのように異なります、例えば、アラート、トーストとスナックバーは通常、アイコンの有無にかかわらず一つの線であなたの情報を含みます.
しかし、すべてのジャンルには以下のような共通点があります.

位置決め-画面上のさまざまな位置に配置することができます

アニメーション-アカウントに自分の配置を取る、彼らはすべての正確に同じパターンを次の最後に

アクション-彼らはすべての1つだけアクション、それが近いかどうか、解雇またはキャンセルしている.

我々が念頭に置いておかなければならないことの1つは、通知がすべてのプラットホーム内容より上に示される傾向があるということです.しかし、ボタンなどの他のアクション要素をブロックできません.

今日の例
今日の例では、私のお気に入りのライブラリの2つを使用して簡単な通知を作成します.コンポーネントスタイリングのために、我々はTailwindを使用して、我々が我々が使う我々の通知をつくるのを援助しますReact Hot Toast 図書館.
私たちのコンポーネントは、4つの要素、アイコン、タイトル、テキストとアクション(解雇)から成ります.すべてのスタイリングとアニメーションがTailwindで行われる間、通知を作成するすべてのハードワークは、反応ホットトーストによって完全に行われます.
この記事のコードでは、いくつかの異なる通知/toastsを作成できるようになります.


コードしましょう
まず、以下の依存関係をインストールしましょう.

npm install classnames react-icons react-hot-toast

今我々App.jsx 依存関係をインポートします.

// @src/App.jsx

import React from "react";
import classNames from "classnames";
import toast, { Toaster } from "react-hot-toast";
import { MdOutlineClose } from "react-icons/md";
import { HiLightningBolt } from "react-icons/hi";

// ...

では、使用するスタイルを作成しましょうApp.jsx :

/* @src/App.module.css */

.notificationWrapper {
  @apply flex flex-row items-center justify-between w-96 bg-gray-900 px-4 py-6 text-white shadow-2xl hover:shadow-none transform-gpu translate-y-0 hover:translate-y-1 rounded-xl relative transition-all duration-500 ease-in-out;
}

.iconWrapper {
  @apply text-xl;
}

.contentWrapper {
  @apply flex flex-col items-start justify-center ml-4 cursor-default;
}

.contentWrapper h1 {
  @apply text-base text-gray-200 font-semibold leading-none tracking-wider;
}

.contentWrapper p {
  @apply text-sm text-gray-400 mt-2 leading-relaxed tracking-wider;
}

.closeIcon {
  @apply absolute top-2 right-2 cursor-pointer text-lg;
}

今、我々は我々の仕事を続けることができますApp.jsx . まず最初に作成したスタイルをインポートし、通知コンポーネントについて作業を開始します.

// @src/App.jsx

import React from "react";
import classNames from "classnames";
import toast, { Toaster } from "react-hot-toast";
import { MdOutlineClose } from "react-icons/md";
import { HiLightningBolt } from "react-icons/hi";

import styles from "./App.module.css";

const notify = () =>
  toast.custom(
    (t) => (
      <div
        className={classNames([
          styles.notificationWrapper,
          t.visible ? "top-0" : "-top-96",
        ])}
      >
        <div className={styles.iconWrapper}>
          <HiLightningBolt />
        </div>
        <div className={styles.contentWrapper}>
          <h1>New version available</h1>
          <p>
            An improved version of VESSEL is now available, refresh to update.
          </p>
        </div>
        <div className={styles.closeIcon} onClick={() => toast.dismiss(t.id)}>
          <MdOutlineClose />
        </div>
      </div>
    ),
    { id: "unique-notification", position: "top-center" }
  );

// ...

すべてが残っているだけの通知とトースターコンポーネント(すべてのトーストをレンダリングするための責任)を表示するボタンが含まれます我々のアプリのコンポーネントを作成することです.

// @src/App.jsx

import React from "react";
import classNames from "classnames";
import toast, { Toaster } from "react-hot-toast";
import { MdOutlineClose } from "react-icons/md";
import { HiLightningBolt } from "react-icons/hi";

import styles from "./App.module.css";

const notify = () =>
  toast.custom(
    (t) => (
      <div
        className={classNames([
          styles.notificationWrapper,
          t.visible ? "top-0" : "-top-96",
        ])}
      >
        <div className={styles.iconWrapper}>
          <HiLightningBolt />
        </div>
        <div className={styles.contentWrapper}>
          <h1>New version available</h1>
          <p>
            An improved version of VESSEL is now available, refresh to update.
          </p>
        </div>
        <div className={styles.closeIcon} onClick={() => toast.dismiss(t.id)}>
          <MdOutlineClose />
        </div>
      </div>
    ),
    { id: "unique-notification", position: "top-center" }
  );

const App = () => {
  return (
    <div>
      <button onClick={notify}>Notify</button>
      <Toaster />
    </div>
  );
};

export default App;

通知コンポーネントで気づいたかもしれませんが、1つのトーストだけがギフトに表示されるようにIDを割り当てます.DOMでのいくつかの通知を開始する.

結論
いつものように、あなたはそれが面白いと思います.あなたがこの記事のどんなエラーにでも気づくならば、コメントで彼らに言及してください.🧑🏻‍💻
この動画はお気に入りから削除されています.😈