🍪 snack-snack
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.
🧩 Getting Started
yarn add snack-snack
or
npm install snack-snack
🎨 How to use
- 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>;Example
You can see more detail example code in example directory
🟣 Contact
E-mail: gus7wn@gmail.com
Github: https://github.com/HyuuunjuKim
Instagram: https://www.instagram.com/h_j_u_u_/