en-US

The simplest usage.

zh-CN

最简单的用法。

import { useImmer } from '@react-devui/hooks';
import { DNotification, DButton } from '@react-devui/ui';

let key = 0;
export default function Demo() {
  const [notifications, setNotifications] = useImmer([]);

  return (
    <>
      <DButton
        onClick={() => {
          setNotifications((draft) => {
            key += 1;
            draft.push({
              key,
              visible: true,
            });
          });
        }}
      >
        Open notification
      </DButton>
      {notifications.map(({ key, visible }) => (
        <DNotification
          key={key}
          dVisible={visible}
          dTitle="Notification Title"
          dDescription={`An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.`}
          onClose={() => {
            setNotifications((draft) => {
              draft.find((n) => n.key === key).visible = false;
            });
          }}
        ></DNotification>
      ))}
    </>
  );
}