Need Prize Money

    react-toastx
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    React Toastbar

    To provide the toast notification use react core

    NPM JavaScript Style Guide

    Install

    npm install --save react-toastx

    Demo

    Usage

    Provider

    Remember to add ToastProvider to root app.
    We need find a root component and assign Provider same below

    import { ToastProvider } from 'react-toastx'
    
    // Remember to add css to root 
    import 'react-toastx/dist/app.css';
    
    // You can add here index.[tsx,jsx]
    // Or any where can a root of your component
    ReactDOM.render(
      <ToastProvider>
        <App />
      </ToastProvider>,
      document.getElementById('root')
    );

    Use in Functional Component?

    import React from 'react';
    import { useToast } from 'react-toastx';
    
    // To use toast for Functional Component
    // We can use it with hook "useToast"
    
    const App = () => {
      const toast = useToast();
    
      return (
        <>
          <button onClick={() => toast.success("React totast bar", {closeTimeout: 3000})}>Toast success</button>
    
          <button onClick={() => toast.warning("React totast bar", {closeTimeout: 3000})}>Toast warning</button>
    
          <button onClick={() => toast.error("React totast bar", {closeTimeout: 3000})}>Toast danger</button>
    
          <button onClick={() => toast.success("React totast bar", {closeTimeout: 3000, filled: true})}>Toast success filled</button>
    
          <button onClick={() => toast.warning("React totast bar", {closeTimeout: 3000, filled: true})}>Toast warning filled</button>
    
          <button onClick={() => toast.error("React totast bar", {closeTimeout: 3000, filled: true})}>Toast danger filled</button>
        </>
      );
    };
    
    export default App;

    Use in Class Component?

    // To use toast with Class component
    // We can use it with HOC "withToast"
    import React from 'react'
    import { withToast } from 'react-toastx'
    
    class SomeComponentUseClass extends React.Component {
      render() {
        const { toast } = this.props;
    
        return (
          <div>
            <button onClick={() => toast.success('Successfully !!!', { closeTimeout: 3000 })}>
              Success toast
            </button>
    
            <button onClick={() => toast.warning('Warning !!!', { closeTimeout: 3000 })}>
              Warning toast
            </button>
    
            <button onClick={() => toast.error('Error !!!', { closeTimeout: 3000 })}>
              Error toast
            </button>
          </div>
        );
      }
    }
    
    export default withToast(SomeComponentUseClass);

    API

    Name Type Description
    toast.success (message : string, config : ToastConfig) => void
    toast.error (message : string, config : ToastConfig) => void
    toast.warning (message : string, config : ToastConfig) => void

    ToastConfig

    Name Type Description
    position <top - bottom> - <left - center - right> Example: "top-right"
    filled Boolean
    closeTimeout Number
    onClose void
    onOpen void
    onClick void

    Changelog

    Version Description
    1.0.0 Publish package
    1.0.1 Fix the error wrong position toast stack in another project

    License

    MIT © duongductrong

    Install

    npm i react-toastx

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    104 kB

    Total Files

    27

    Last publish

    Collaborators

    • duongductrong