Skip to content

carl32crc/react-toast-wnm

Repository files navigation

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