notistack Documentation

Technical Documentation: iamhosseindhv/notistack

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`) Copy Section

Table of Contents Copy Chapter

• How to use
• Online demo
• Documentation

Getting Started Copy Chapter

Use your preferred package manager:

npm install notistack
yarn add notistack

Version guide

How to use Copy Section

Instantiate a SnackbarProvider component and start showing snackbars: (see docs for a full list of available props)

import { SnackbarProvider, enqueueSnackbar } from 'notistack';

const App = () => {
  return (
    <div>
      <SnackbarProvider />
      <button onClick={() => enqueueSnackbar('That was easy!')}>Show snackbar</button>
    </div>
  );
};

Alternatively, You can use useSnackbar hook to display Snackbars. Just remember to wrap your app inside of a SnackbarProvider to have access to the hook context:

import { SnackbarProvider, useSnackbar } from 'notistack';

// wrap your app
<SnackbarProvider>
  <App />
  <MyButton />
</SnackbarProvider>

const MyButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
  return <Button onClick={() => enqueueSnackbar('I love hooks')}>Show snackbar</Button>;
};

Online demo Copy Section

Visit the documentation website to see all the examples.
Or play with a minimal working example: codesandbox

Contribution Copy Section

Open an issue and your problem will be solved.

Author - Contact Copy Section

Hossein Dehnokhalaji

Overview (`examples/custom-snackbar-example-2/README.md`) Copy Section

Notistack Custom Snackbar example

Overview (`examples/custom-snackbar-example/README.md`) Copy Section

Notistack Custom Snackbar example

Overview (`examples/mobx-example/README.md`) Copy Section

Notistack Mobx example

Overview (`examples/redux-example/README.md`) Copy Section

Notistack Redux example

Overview (`examples/simple-example/README.md`) Copy Section

Notistack simple example

--- METRICS ---

• Files Extracted: 6
• Estimated Token Budget: ~1090 tokens
• Canonical Reference: https://codewiki.google/github.com/iamhosseindhv/notistack