Package Exports

react-toast-craft
react-toast-craft/dist/index.js
react-toast-craft/dist/index.mjs

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

A simple and customizable React toast notifications library.

toasts

Installation

To install the package, run:

npm install react-toast-craft

Simply wrap your App component with ToastProvider

import ToastProvider from 'react-toast-craft'

createRoot(document.getElementById('root')).render(
    <ToastProvider>
      <App />
    </ToastProvider>
)

Use addTost from useToasts()

Available Toast Types

success: Displays a success toast with a green background.
error: Displays an error toast with a red background.
info: Displays an informational toast with a blue background.
warning: Displays a warning toast with a yellow background.

import { useToasts } from 'react-toast-craft'

const App = () => {
  const { addToast } = useToasts()

  return (
    <div>
      <button onClick={() => addToast('Success notification!', 'success')}>
        Show Success Toast
      </button>
    </div>
  )
}

Customizing `ToastProvider` Props

You can customize the ToastProvider with the following optional props:

position: The position of the toast notifications. Default is 'bottom-right'. Options include:
- 'top-left'
- 'top-center'
- 'top-right'
- 'bottom-left'
- 'bottom-center'
- 'bottom-right'
containerStyles: Styles to apply to the container of all toasts (e.g., background color, padding, etc.).
messageStyles: Styles to apply to the individual toast messages (e.g., font size, color, etc.).
iconStyles: Styles to apply to any icons (if any) used inside the toast.
closeAfter: The duration (in milliseconds) before the toast automatically disappears. Default is 5000 (5 seconds).

 <ToastProvider
      position="bottom-right"
      containerStyles={{ backgroundColor: '#333' }}
      messageStyles={{ color: 'white' }}
      iconStyles={{ fontSize: '20px' }}
      closeAfter={5000}
    >