React-toast-wnm NPM

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>
  )
}