Toast

Toast is a pop-up message used to display relevant information to our users.

Figma Reference

Figma

Usage

import { Toaster, ToastType, emitToast } from '@dt-dds/react';

const notify = () =>
  emitToast({
    title: 'success',
    message: 'myMEssage' + count,
    type: ToastType.Success,
    children: (
      <Tooltip>
        <Button onClick={() => console.log('clicked')}>Action 2</Button>
        <Tooltip.Content>Some tooltip</Tooltip.Content>
      </Tooltip>
    ),
  });

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

Customizable

It's a very customizable component. We are using react-hot-toast for control our provider. You can check the react-hot-toast documentation for more knowledge on this. However, you can create your provider if you wish. For example, let's say you want to create a new prop called autoHide. If this prop isn't true, you want to have the toast indefinitely on the screen.

interface CallToastArgs {
  title: string;
  message: string;
  type: ToastType;
  autoHide: boolean;
}

export const ToasterContext = createContext({
  callToast: (args: CallToastArgs) => null,
});

const Toaster = ({ children }: { children: React.ReactNode }) => {
  const [toast, setToast] = useState<
    Partial<ToastProps> & { autoHide: boolean }
  >(null);

  const callToast = ({ title, message, type, autoHide }: CallToastArgs) =>
    setToast({
      id: Date.now().toString(),
      title,
      message,
      type,
      autoHide,
    });

  const close = () =>
    setToast((prevState) => ({ ...prevState, isVisible: false }));

  useEffect(() => {
    if (toast && toast.autoHide) {
      const timer = setTimeout(() => close(), 1000);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  return (
    <ToasterContext.Provider value={{ callToast }}>
      {children}
      <div style={{ position: 'fixed', bottom: 10, left: 10 }}>
        {toast && (
          <Toast
            key={toast.id}
            id={toast.id}
            type={toast.type}
            title={toast.title}
            message={toast.message}
            isVisible={toast.isVisible}
            onClose={close}
          />
        )}
      </div>
    </ToasterContext.Provider>
  );
};

const App = () => {
  return (
    <Toaster>
      <MyComponent />
    </Toaster>
  );
};

const MyComponent = () => {
  const { callToast } = useContext(ToasterContext);

  return (
    <Button
      onClick={() =>
        callToast({
          message: 'myMEssage' + count,
          type: ToastType.Success,
          title: 'success',
          autoHide: false,
        })
      }
    >
      Clicked Me
    </Button>
  );
};

API

Toaster

emitToast

The emitToast extends from ToastOptions. They will overwrite all options received from <Toaster />. For example:

You can check all ToastOptions here. The Toast position is fixed, on small screens it will be on the bottom center and on large screens it will be on the bottom right. The default duration for any type of toast is 4000ms. For the error type, the duration is infinite.

dismissToast

Toast

Stack

• TypeScript for static type checking
• React — JavaScript library for user interfaces
• Emotion — for writing css styles with JavaScript
• Storybook — UI component environment powered by Vite
• Jest - JavaScript Testing Framework
• React Testing Library - to test UI components in a user-centric way
• ESLint for code linting
• Prettier for code formatting
• Tsup — TypeScript bundler powered by esbuild
• Yarn from managing packages

Commands

• yarn build - Build the package
• yarn dev - Run the package locally
• yarn lint - Lint all files within this package
• yarn test - Run all unit tests
• yarn test:report - Open the test coverage report
• yarn test:update:snapshot - Run all unit tests and update the snapshot

Compilation

Running yarn build from the root of the package will use tsup to compile the raw TypeScript and React code to plain JavaScript.

The /dist folder contains the compiled output.

toast
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...

Versioning

Follows semantic versioning

© License

Licensed under MIT License