https://github.com/aminnairi/react-mui-snackbar

React Material UI's Snackbar provider & utilities written in TypeScript.
https://github.com/aminnairi/react-mui-snackbar

Last synced: about 5 hours ago
JSON representation

React Material UI's Snackbar provider & utilities written in TypeScript.

• Host: GitHub
• URL: https://github.com/aminnairi/react-mui-snackbar
• Owner: aminnairi
• License: gpl-3.0
• Created: 2022-10-29T07:52:55.000Z (about 2 years ago)
• Default Branch: development
• Last Pushed: 2022-10-29T08:02:15.000Z (about 2 years ago)
• Last Synced: 2024-11-09T02:08:38.259Z (7 days ago)
• Language: TypeScript
• Homepage:
• Size: 65.4 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# react-mui-snackbar

React Material UI's Snackbar provider & utilities written in TypeScript.

## Requirements

- [Node](https://nodejs.org/)

- [NPM](https://www.npmjs.com/)

- [React](https://www.npmjs.com/package/react)

- [ReactDOM](https://www.npmjs.com/package/react-dom)

- [Material UI](https://www.npmjs.com/package/@mui/material)

## Installation

```bash

npm install @aminnairi/react-mui-snackbar

```

## Usage

```tsx

// ./src/index.jsx

import React, { StrictMode } from "react"

import { createRoot } from "react-dom/client"

import { SnackbarContextProvider } from "@aminnairi/react-mui-snackbar"

import { App } from "./components/app"

const rootElement = document.getElementById("root")

if (!rootElement) {

    throw new Error("Root element not found")

}

const root = createRoot()

root.render(

    

        

            

        

    

)

```

```tsx

// ./src/components/app.jsx

import React, { Fragment, useEffect } from "react"

import { useSnackbarContext } from "@aminnairi/react-mui-snackbar"

import { Button } from "@mui/material"

export const App = () => {

    const {

        openSnackbar,

        closeSnackbar,

        setSnackbarSeverity,

        setSnackbarMessage

    } = useSnackbarContext()

    useEffect(() => {

        setSnackbarSeverity("success")

        setSnackbarMessage("Hello, world!")

    }, [])

    return (

        

            Open Snackbar

            Close Snackbar

        

    )

}

```