@prasoongoswami/react_snackbar

react_snackbar

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

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