reuse-react-snackbar v0.1.20

React Snackbar

Use very elegant fully customisable, with automatically disappearable snackbar in your React application.

• Customisable CSS (inline or by custom classname)
• Manage disappear time
• Multiple Modes
• Show in any place
• Action Handling

install

   npm i reuse-react-snackbar

or

   yarn add reuse-react-snackbar

Demo Screenshot

import

    import SnackBar from 'reuse-react-snackbar'

Usage

    <SnackBar message="You've added file Successfully" mode="SUCCESS" open={true} />

Inline CSS

    <SnackBar
        message="You've added file Successfully"
        mode="SUCCESS"
        open={true}
        style={{
            textStyle: {
                color: 'white',
            },
            buttonStyle: {
                backgroundColor: 'white',
                color: 'black',
            },
            containerStyle: {
                background: 'grey',
                boxShadow: 'black 6px 7px 12px -4px'
            }
        }}
        />

Output

Action

    <SnackBar
        message="You've added file Successfully"
        mode="SUCCESS"
        open={true}
        actionLabel="Done!"
        action={(e) => {
            console.log(`Clicked on Done!`, e)
        }}
    />