Skip to content

React snackbar is an open-source library made with material UI for react apps for generating snackbar notification

Notifications You must be signed in to change notification settings

PraSoonGosWami/react_snackbar

Repository files navigation

react_snackbar

A simple snackbar notification for react apps made with Material-ui

NPM JavaScript Style Guide

Install

You need to install @material-ui/lab and @material-ui/core, simply run the command

npm install --save @prasoongoswami/react_snackbar @material-ui/core @material-ui/lab

Usage

In your index.js
//import SnackBarProvider from @prasoongoswami/react_snackbar
import { SnackBarProvider } from '@prasoongoswami/react_snackbar'

ReactDOM.render(
  //Wrap the SnackBarProvider around the App
  <SnackBarProvider>
    <App/>
  </SnackBarProvider>,
  document.getElementById('root'))
In your app.js or where you want to show a snackbar
//import useAlert hook from @prasoongoswami/react_snackbar
import { useAlert } from '@prasoongoswami/react_snackbar'

const App = () => {
  //use addAlert method to display snackbar
  const { addAlert } = useAlert()
  return (
    <div>
      //addAlert(options)
      //you can customise your snackbar using options parameter
      <button onClick={() => {
        addAlert({message:"Error text", severity:'success'})
      }}>Generate</button>
    </div>

  )
}

Customize your snackbar

//import useAlert hook from @prasoongoswami/react_snackbar
import { useAlert } from '@prasoongoswami/react_snackbar'

const App = () => {
  //use addAlert method to display snackbar
  const { addAlert } = useAlert()
  const options =
    {
      title : 'This is title',
      message: 'This is material snackbar',
      severity: 'error', // error | success | info | warning
      duration: 4000, // duration after which snackbar disappears automatically
      vertical: 'bottom', // vertical placement - bottom | top
      horizontal: 'left', // horizontal placement - left | right | center
      variant: 'filled' // filled | outlined
    }
  return (
    <div>
      //addAlert(options)
      //you can customise your snackbar using options parameter
      <button onClick={() => {
        addAlert(options)
      }}>Generate</button>
    </div>

  )
}

options

options type default values
title string empty string
message string empty string
severity string error error, info, success, warning
duration number 4000 any (in milliseconds)
vertical string bottom bottom, top
horizontal string bottom left, right, center
variant string filled filled, outlined

License

MIT © PraSoonGosWami

About

React snackbar is an open-source library made with material UI for react apps for generating snackbar notification

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published