Toast Package

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

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

| Property | Type | Default | Description | | -------------------- | :------------------------------ | :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | toastOptions | DefaultToastOptions | - | These will act as default options for all toasts. See the documentation here. | | reverseOrder | boolean | - | Toasts spawn at top by default. Set to true if you want new toasts at the end. | | gutter | number | 8 | Changes the gap between each toast. | | containerStyle | React.CSSProperties | - | Customize the style of toaster div. This can be used to change the offset of all toasts | | containerClassName | string | undefined | Add a custom CSS class name to toaster div. | | children | (toast: Toast) => JSX.Element | - | You can customize how each toast is displayed by passing your own render function to the Toaster as its children. This function will be called for every toast, allowing you to render any component based on the toast’s state. Note: If the rendered component is a button, its styles will be overridden by the default styles. |

emitToast

| Property | Type | Default | Description | | ------------- | :---------------- | :------ | :------------------------------------------------------------------------ | | type | enum<ToastType> | - | Sets the variant toast ("success", ..., "N") | | title | string | - | The title to be displayed | | message | string | - | The message to be displayed | | dismissable | boolean | true | Sets the visibility of a close button that will fire the onClose callback | | children | ReactNode | - | A child that will be rendered at the end of the content section |

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

| Property | Type | Default | Description | | ---------- | :-------------- | :--------------------------------- | :---------------------------------- | | duration | number | For success: 4000, error: Infinity | Show the toast for a duration in ms | | style | CSSProperties | - | Add css directly to the toast. |

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

| Property | Type | Default | Description | | --------- | :------- | :------ | :------------------------- | | toastId | string | - | ID of the toast to dismiss |

Toast

| Property | Type | Default | Description | | ------------- | :---------------- | :------ | :------------------------------------------------------------------------------------------------------------ | | id | string | - | Toast identifier | | dataTest | string | - | Defines a value for the data test | | title | string | - | The title to be displayed | | message | string | - | The message to be displayed | | onClose | string | - | The callback when the close button is fired. | | type | enum<ToastType> | - | Sets the variant toast ("success", ..., "N") | | isVisible | boolean | true | Sets the visibility of the toast and triggers the fade out effect | | dismissable | boolean | true | Sets the visibility of a close button that will fire the onClose callback | | children | ReactNode | - | Child components to be rendered at the end of the content section, this can be used to receive action buttons |

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