Notistack NPM | npm.io

3.0.2 • Published 3 months ago

Install

Weekly downloads

242,002

License

MIT

Repository

Last release

3 months ago

Notistack: Display notifications with call of a function.

Table of Contents

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

Version guide

Version	Notes
`v3.x.x`	Latest stable release. Standalone (i.e. not dependent on material-ui)
<= `v2.0.8`	Requires Material-UI v5 as peer dependency. `npm install notistack@2.0.8`
<= `1.0.10`	Requires Material-UI <= v4 as peer dependency. `npm install notistack@latest-mui-v4`

How to use

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

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

Contribution

Open an issue and your problem will be solved.

Author - Contact

Hossein Dehnokhalaji

notistack enqueueSnackbar snackbarprovider useSnackbar multiple react javascript material-ui toast redux snackbar stacked notification material design hossein dehnokhalaji iamhosseindhv

@appcraft/core @borderfreefinancial/dev-revo-consumer-lite-testing1-local @borderfreefinancial/dev-revo-consumer-lite-testing1 @flyteorg/console @flyteoss/console proem-ui-develop react-ts-webpack sebrae-react-scripts design-framework rafaelgcs-dropzone-react events-manager-view nodegen-utils cleomar-react-easy minsilo-react-client @flmc/lite-renderer @apraamcos/apra-amcos-ui storybook-addons-playwright delivered4all staffpad-ui-library panel-maluko-test @vanroey/vra-site-provisioning-admin-dashboard-sp-fx mypdx-ui2 scandinavia @joseirrazabal/links vigoworks.components apra-amcos-ui meetscheduler abc-institute nuxo_front_update obss-react @pdasolutions/web cybex-game-addon kushkiconnectvt temp-connect-ui-accel test-connect-bundler react-material-ui-file-manager @jibadano/backoffice-components csr-iam-app-lib gally-admin-components simple-api-doc ts-basic evolve-foresite-components-ui @infinitebrahmanuniverse/nolb-noti flowiseai-ui @compassdigital/compassdigital.components.distilr @raphaelcamar/my-financial-storybook @textea/yodas @everything-registry/sub-chunk-2334 cloud-air-components caseark-ui design-library-test mintt-components-test @ascendware/mx goni-functions skb-components meeting-component-library @yona-network/wallet-adapter-example @yona-network/wallet-adapter-material-ui-starter actionsync-ui talentorg-profile-editor tbc-common-snackbar tcp-core-utilities task-manager-new temppppppppp test-chat-new with-firebase-authentication webapp-joostly wface wyzetalk-assessment-frontend wyzetalk-cms-users-fe tedddfgdsst-ui telegram-react storybook-addon-playwright testttbuildbabel testttbuildbabelfinal testttbuildbabelfinal2 testtbredcrum testconnectfinalfinal testconnectttttttt testconnectv1 test_realityservices-ui-components test-ui-tests voalle-ui voluptatemsed vs-design-system vite-page-builder vivify-ideas-react-scripts varshini-crud vases-ui @dotgiscorp/webcomponents @discuzz/discuzz @cmckenna/ed-component-library @creatable/capa-components @crayond_dev/user-management-test @craftercms/studio-ui @customd/admin-dashboard @collectionscms/collections @cwrc/leafwriter @connexta/atlas @doopage/react-ui-kit

3 months ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago