https://github.com/manjushsh/mui-simple-toast

Simplified MUI Toast
https://github.com/manjushsh/mui-simple-toast

material-toast material-ui mui toast

Last synced: 16 days ago
JSON representation

Simplified MUI Toast

• Host: GitHub
• URL: https://github.com/manjushsh/mui-simple-toast
• Owner: manjushsh
• License: mit
• Created: 2022-11-01T11:46:04.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-18T12:54:56.000Z (over 1 year ago)
• Last Synced: 2024-12-11T20:35:08.595Z (about 1 month ago)
• Topics: material-toast, material-ui, mui, toast
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/mui-simple-toast
• Size: 421 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: history.txt
  • License: LICENSE

Awesome Lists containing this project

README

        
# mui-simple-toast - Simplified toaster/snackbar for MUI

A Simpler MUI Toast.

This reduces code to single line compared to Actual Toast Code from MUI

```

  

    This is a success message!

  

```

to

```

```

# [Demo](https://codesandbox.io/s/mui-simple-toast-g5ei8i?file=/src/index.tsx)

## If install fails, try running

`npm i --legacy-peer-deps`

# How to use?

You can set toaster using ```seToast```

Example on API Call:

```

fetch(url)

.then(() => setToast({

    show: true,

    type: 'success',

    message: 'Success!',

}))

.catch(err => setToast({

    show: true,

    type: 'error',

    message: err?.message || '',

    }))

```

 ### In your component/Root component, 

```

import React, { useEffect, useState } from 'react';

import MUISimpleToast, { defaultToast } from 'mui-simple-toast'

import './App.css';

function App() {

  const  [toast, setToast] = useState(defaultToast)

  useEffect(() => {

    setInterval(() => {

        setToast({

          show: true,

          type: 'success',

          message: 'Welcome to Simpler toast!',

        })

    }, 3000)

  }, [])

  return (

      


        
Hi There. Can you see some toast?
>

        

      

  );

}


export default App;

```

In return method of component, add ``````

### Or you can use Context API

in index.js

```

import React, { createContext, useState } from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

import './index.css';

import { defaultToast } from 'mui-simple-toast';

/** Create a Context for Toast Wrapper*/

export const ToastContext = createContext(defaultToast)

const ToastProvider = ({ children }: any) => {

  // ** States

  const [toast, updateToast] = useState(defaultToast)

  const setToast = (toastData: any) => updateToast({ ...toast, ...toastData })

  const values = {

    toast,

    setToast,

  }

  return {children}

}

root.render(

  

    /** Wrap your Root component with Context Provider */

    

      

    

  

);

```

In your App/ Child Component, add

```

const { toast, setToast }: any = useContext(ToastContext)

```

and in return of same component,

```

```