bear-react-toaster

Toaster library based for Reactjs

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
bear-react-toaster
202.0.1-test.04 months ago7 months agoMinified + gzip package size for bear-react-toaster in KB

Readme

bear-react-toaster
Toaster library based for Reactjs

NPM npm

Support Version Map

React | React Scripts | Bear React Grid | ------|---------------|----------------:| 18 | 5.0.1 | 2.0.0 | 17 | 4.0.3 | 1.0.5 |

Install

yarn add bear-react-toaster

Usage

add in your index.html
<div id="modal-root"></div>

add in your index.tsx
import "bear-react-toaster/dist/index.css";

add in your App.tsx
import {ToasterPortal} from "bear-react-toaster";

const App = () => {
    return (
        <div>
            <BaseUsed/>
            <ToasterPortal timeout={3000}/>
        </div>
    );
};

then in your page
import {EStatus, toast} from 'bear-react-toaster';


const BaseUsed = () => {

    return (
        <div>
            <button type="button" onClick={() => toast({message: 'useToaster message'})}>
                useToaster message
            </button>

            <button type="button" onClick={() => toast({status: EStatus.success, message: 'useToaster success + message'})}>
                useToaster status + message
            </button>


            <button type="button" onClick={() => toast.success({message: 'useToaster --- toaster.success'})}>
                useToaster --- toaster.success
            </button>


            <button type="button" onClick={() => toast({status: EStatus.warning, message: 'useToaster warning + message'})}>
                useToaster warning + message
            </button>
            
            <button type="button" color="danger" onClick={() => toast({status: EStatus.error, message: 'useToaster error + message'})}>
                useToaster error + message
            </button>

            <button type="button" color="danger" onClick={() => toast.error({message: 'useToaster --- toaster.error'})}>
                useToaster --- toaster.error
            </button>


            <button type="button" color="info" onClick={() => toast({status: EStatus.info, message: 'useToaster info + message'})}>
                useToaster info + message
            </button>


            <button type="button" onClick={() => toast({status: EStatus.success, message: 'window.toaster status + message'})}>
                window.toaster status + message
            </button>


        </div>
    );

};

There is also a codesandbox template that you can fork and play with it:
Edit react-editext-template
Component and setup docs

License

MIT © imagine10255