React snackbar notification- React JS Component

React snackbar notification is React JS Component to show snackbar notifications in React JS app. It has simple implementation with message and action link buttons. The position of the notification can be configured in options. The display positions available on the screen are: top, right, bottom, left. Notification hide timeout is also configured in options. This is a quick implementation for snackbar notification in react app.

Installation

npm i react-snackbar-notification

Usage

import SnackBar from 'react-snackbar-notification'

const options = {
    positionY: 'top', // vertical position
    positionX: 'right', // horizontal position
    fadeout: 10, // auto hide notification item in seconds
    dummyDisplay: true // show dummy notifications (for demo only)
}

const notifications = [
    {
        message: "You have new message.  consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore ",
        action: [
            {
                label: 'OK'
            },
            {
                label: 'View',
                link: 'https://sujanbyanjankar.com.np'
            }
        ]
    },
    {
        message: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore sit amet, consetetur sadipscing elitr, sed diam nonumy ei.",
        action: [
            {
                label: 'OK'
            }
        ]
    }
]
<SnackBar notifications={notifications}/>

Options

Note

This is just the basic style. You can always overide css styles to match with your theme.

Demo

Click to view Demo

Dependencies

• uuid 3.3.2

You may also be interested in Default Prop values React JS component