랭킹으로 돌아가기
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
reactjsmaterial-uimaterial-designjavascriptsnackbarstackgoogle-materialtoasttoast-notificationsnotificationsredux
주요 지표
스타 성장
스타
4.1k
포크
292
주간 성장
—
이슈
53
2k4k
2018년 8월2019년 11월2021년 3월2022년 7월2023년 11월2025년 3월2026년 7월
아티팩트npm
npm install notistackREADME
notistack: Display notifications with call of a function.
Easy to use, customizable, smooth transitions, stack and queue them up!
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
관련 저장소