react-toast-wnm ·

Installation

$ npm install --save react-toast-wnm
$ yarn add react-toast-wnm

Demo

Check demo

Icons

ikonate github ikonate icons

Toast Hook Params

• position options -> 'bottom-right' | 'bottom-center' | 'bottom-left' | 'top-left' | 'top-center' | 'top-right'.
• type options -> 'default' | 'error' | 'warning' | 'success' | 'info'.

Params	Description
autoDismiss boolean	Default: true. Disable or enable dismiss autoclose toast.
backgroundColor string	Default ''. Toast backgroundColor
borderRadius string	Default 6px . Toast border toast.
children Object{actions, content}	Optional. Toast content and action custom.
color string	Default ''. Color text toast.
delay number	Default 3000. The time until a toast will be dismissed automatically, in milliseconds.
enableAnimation boolean	Default: true.
height string	Default 104px. Toast height.
isClosable boolean	Default true . Show or hide close button.
padding string	Default 24px 32px. Toast padding.
position string	Default bottom-right. Viewport place the toasts.
subtitle string	Default ''. Toast title.
title string	Default ''. Toast subtitle.
type string	Default default. Type toast.
width string	Default 456px. Toast width.

Default sample use

import { useToast } from 'react-toast-wnm'

const MyComponent = () => {
  const toast = useToast();

  return (
    <Button
      onClick={(): void => {
        toast({
          autoDismiss: true,
          enableAnimation: true,
          delay: 3000,
          type: 'success',
          borderRadius: '6px',
          position: 'bottom-right',
          height: '104px',
          padding: '24px 32px',
          subtitle: 'Default subtitle',
          title: 'Default title',
          width: '456px'
        });
      }}
    >
      Create my custom toast
    </Button>
  );
}

Custom sample use

import { useToast } from 'react-toast-wnm'

const CustomContent = () => (
  <div className={myCustomContentStyles}>
    <div>My custom title</div>
    <div>My custom subtitle</div>
  </div>
)

//When you create a custom actions 
// component, a closeToast prop is injected into your component.
const CustomActions = ({ closeToast, color, backgroundColor }) => (
  <div className={myCustomActionsStyles}>
    <button style={{ backgroundColor, color }} onClick={closeToast}>
      Button label
    </button>
    <button style={{ backgroundColor, color }}>Other button</button>
  </div>
)

const MyComponent = () => {
  const toast = useToast()

  return (
    <Button
      onClick={() => {
        toast({
          delay: 5000,
          backgroundColor: '#fff',
          borderRadius: '6px',
          color: '#000',
          position: 'top-right',
          actions: (
            <CustomActions
              color='purple'
              backgroundColor='red'
            />
          ),
          content: <CustomContent />,
     
        });
      }}
    >
      Create my custom toast
    </Button>
  )
}