Package Exports

react-toast-wnm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-toast-wnm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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