next-snackbar

next-snackbar

NPM: npmjs.com/package/next-snackbar

Installation

• npm i next-snackbar --save

Define Module

import Snackbar from 'next-snackbar';
// or
const Snackbar = require('next-snackbar');

Example JSX Page

// pages/test.jsx

import Snackbar from 'next-snackbar';
const Page = () => {
    const showSnackbar = (id) => {
        new Snackbar({
            options: {
                duration: 3000,
                speed: .5,
                outSpeed: 2.5,
                type: id, //warning, error, info, success
                align: 'end', //start, center, end
                position: 'bottom' // top || bottom
            },
            title: 'Hey?',
            message: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
        }).show()
    }
    return <>
        <button className="btn" onClick={() => showSnackbar('error')}>
            Error Snackbar
        </button>
        <button className="btn" onClick={() => showSnackbar('warning')}>
            Warning Snackbar
        </button>
        <button className="btn" onClick={() => showSnackbar('success')}>
            Success Snackbar
        </button>
        <button className="btn" onClick={() => showSnackbar('info')}>
            Info Snackbar
        </button>
    </>
}

export default Page;