@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 | Toast display position | | 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.

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.