snack-snack is a library which makes it simple to use snackbar in functional component with React App. With this library, you can customize and use snackbar which fits your application the most.
yarn add snack-snack
or
npm install snack-snack
- Add
<div id="snackbar"></div>to index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root"></div>
<div id="snackbar"></div>
</body>
</html>- Put a SnackbarProvider component by wrapping your components
// App.js
import { SnackbarProvider } from 'snack-snack';
<SnackbarProvider>
<YourComponent1 />
<YourComponent2 />
<YourComponent3 />
</SnackbarProvider>;- You can use useSnackbar hook in your functional components
import { useSnackbar } from 'snack-snack';
const Example = () => {
const { openSnackbar } = useSnackbar();
openSnackbar(message what you want);
}- Custom snackbar what you want by providing customStyles props to SnackbarProvider
// App.js
import { SnackbarProvider } from 'snack-snack';
<SnackbarProvider customStyles = {{ backgroundColor: 'red' }}>
<YourComponent1 />
<YourComponent2 />
<YourComponent3 />
</SnackbarProvider>;
You can see more detail example code in example directory
E-mail: gus7wn@gmail.com
Github: https://github.com/HyuuunjuKim
Instagram: https://www.instagram.com/h_j_u_u_/