@choi-ui/react-toast

This package provides easy access to toast messages in React applications.

Installation

// npm
$ npm insatll @choi-ui/react-toast

// pnpm
$ pnpm add @choi-ui/react-toast

Usage

import Toast, { onToast } from '@choi-ui/react-toast';

cosnt App = () => {
  const handleClick = () => {
    onToast({
      message: 'hello toast!',
    });
  };

  return (
    <div>
        <button onClick={onToast}>toast</button>
        <Toast />
    </div>
  );
}

Storybook Documentation

It will be helpful to refer to the storybook when using it.

Description

It is recommended to declare the <Toast /> component in the top-level component. ex. App.tsx

If you declare it in the top-level component, you don't need to add it to each component where toast is used.

Props

The props of the onToast function, which is the event used when generating a toast, are as follows.

props	type	default	description
message	string		displayed message
type	success | warn | error | default	default	Colors by toast type
duration	number	3000	Toast Duration (ms)
position	top | top-right | top-left | bottom | bottom-right | bottom-left	bottom	bottom
isClosable	boolean	true	Whether to display the close button
variants	filled | outlined	filled	filled has a solid background, outlined has a border
custom	React.ReactNode		Customize toast content

Note

In onToast's props, custom values ​​are designed to have priority over message values.

For example, if message and custom are configured together in props, custom will have priority and message will be skipped.

import Toast, { onToast } from '@choi-ui/react-toast';

cosnt App = () => {
  const handleClick = () => {
    onToast({
      message: 'simple message', // Skip
      custom: () => <div>
        <h1>Hello</h1>
        <p>this is custom toast message</p>
      </div>
    });
  };

  return (
    <div>
        <button onClick={onToast}>toast</button>
        <Toast />
    </div>
  );
}

It is effective for displaying a toast in the form of a component rather than a simple text message.