snack-snack

1.0.5 • Public • Published

🍪 snack-snack

Group 62 (2)

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

  1. 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>
  1. Put a SnackbarProvider component by wrapping your components
// App.js

import { SnackbarProvider } from 'snack-snack';

<SnackbarProvider>
  <YourComponent1 />
  <YourComponent2 />
  <YourComponent3 />
</SnackbarProvider>;
  1. You can use useSnackbar hook in your functional components
import { useSnackbar } from 'snack-snack';

const Example = () => {
  const { openSnackbar } = useSnackbar();

  openSnackbar(message what you want);
}
  1. 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

Group 62 (2)

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_/

Package Sidebar

Install

npm i snack-snack

Weekly Downloads

0

Version

1.0.5

License

MIT

Unpacked Size

22 kB

Total Files

35

Last publish

Collaborators

  • hjuu