CHANGELOG
Thanks to all contributers who improved notistack by opening an issue/PR.
[email protected]
###### March 8, 2023
* @alexander7161 Restore aria-describedby prop on SnackbarContent #547
* @sodenn Fix regression on using React.Node as Snackbar message #548
<br />
[email protected]
###### March 6, 2023
New features
* Notistack can now be used standalone and without requiring @mui/core to be installed as a
peerDependency.* Support for passing custom snackbar component. See custom components for more info.
* Support for overriding styles using
styled. See overriding styles for more info.* Allow displaying or closing Snackbars from outside a React component. See getting started guide for more info.
* Various typescript fix and imporvements
* Exports
Transition component to help with creating your own enter/close transitions. See Transitions for more info.* Upgraded documentation website with docs and examples for both notistack
v2.x and v3.xBreaking changes
* See Migration guide for a full list of breaking changes with instruction on how to upgrade to v3.
<br />
[email protected]
###### Oct 15, 2022
* @jordansexton Fix TypeScript bad import path #485
<br />
[email protected]
###### Oct 15, 2022
* Fix TypeScript cannot be used as a JSX constructor #485
<br />
[email protected]
###### Oct 15, 2022
* @ryancrunchi @vwalsh Fix TypeScript cannot be used as a JSX constructor #485
<br />
[email protected]
###### May 12, 2022
* @neporshiso Update TransitionComponent type for MUIv5 compatibility #474
<br />
[email protected]
###### Apr 10, 2022
* @suren-atoyan Add support for React 18 #482
<br />
[email protected]
###### Oct 31, 2021
* @h0tw4t3r Ensure
variant classes are passed to SnackbarContent #451 <br />
[email protected]
###### Sep 26, 2021
* @hugofpsilva @ramosbugs @joemaffei Publish material-ui v5 compatible version as
latest instead of next #437 <br />
[email protected]
###### July 25, 2021
* @joshkel Support Collapse with root and container class keys #408
<br />
[email protected]
###### May 19, 2021
* @SimonAmphora Remove the need to use
!important to customise variant styles #215 (comment) <br />
[email protected]
###### May 18, 2021
* @angeshpc91 Fixes issues with centered snackbars on xs screen sizes #380
<br />
[email protected]
###### May 8, 2021
* @whytspace Multiple Snackbars always left aligned #373
<br />
[email protected]
###### April 18, 2021
* @rzmz Snackbars should have equal width on XS screens #367
<br />
[email protected]
###### February 28, 2021
* Prevent snackbars from having the same width #356
<br />
[email protected]
###### February 23, 2021
* @tarazena: Export missing SnackbarContent for TypeScript #354
<br />
[email protected]
###### December 23, 2020
* @gregorysl @lephleg @joaogardenberg Add support for React 17 #339
<br />
[email protected]
###### November 26, 2020
* Add support for MUI v5 #333
<br />
[email protected]
###### October 6, 2020
* @thierrysantos: EnqueueSnackbar supports snackbar with key zero #318
* Fix various typescript inconsistencies #319
<br />
[email protected]
###### August 22, 2020
* Drop
SnackbarContent component and ContentProps props #297#### Breaking Changes
*
className prop is now used to customise styles applied to the _content_ of snackbar (e.g. backgroundColor).* If you were using
className to apply styles to Snackbar component, you should now do so using classes.root.<SnackbarProvider
- className={classes.snackbar}
+ classes={{
+ root: classes.snackbar
+ }}
* ContentProps prop is not supported anymore. Here are alternative ways to pass the same data to snackbar component. For any other
scenario, you should pass you own custom content.
<SnackbarProvider
- ContentProps={{
- action: () => <button>dismiss</button>,
- 'aria-describedby': 'some-value',
- }}
+ action={() => <button>dismiss</button>}
+ ariaAttributes={{
+ 'aria-describedby': 'some-value'
+ }}
* If you have customised
MuiSnackbarContent through Material-UI theme object, these changes won't automaticallyreflect within notistack. You can however, use
className prop to apply your customisations.const theme = createMuiTheme({
overrides: {
// no effect within notistack
MuiSnackbarContent: {
root: {
fontSize: '1rem',
},
},
},
});<br />
[email protected]
###### June 10, 2020
* Bug fix and improvments #277
* Alternative for Object.entries to better support IE 11 compat #284
<br />
[email protected]
###### May 17, 2020
* @lukawsk: Allow autoHideDuration be null #273
<br />
[email protected]
###### May 17, 2020
* @nebojsanb: Fix bug with displaying snackbars #270
* @nebojsanb: Improve bundle size by removing
react-is dependency #272<br />
[email protected]
###### May 15, 2020
* Reduce bundle size. Many thanks to @merceyz #268 #209 #163
<br />
[email protected]
###### May 12, 2020
* Exclude
tsconfig.json in the build #266<br />
[email protected]
###### May 12, 2020
* @iinitz: Enforce white text for dark theme #241
* @fbarbare: Let Mat UI handle the font and border-radius #262
* @tomohiro-iwana @JuanmaMenendez: Fix bug with snackbar not being centered on
xs screens #232* Add new
containerRoot class to SnackbarContainer #263* Use filled icons as default icon variant #265
<br />
[email protected]
###### April 20, 2020
* @mehmetkose @andrewmclagan @oliviertassinari @merceyz: Reduce Bundle size by using
clsx instead of classnames, Use babel-plugin-optimize-clsx #163* @kikoanis Fix bug with custom variant
classes #251* Drop support for Material UI v3
<br />
[email protected]
###### April 17, 2020
* Migrate codebase to typescript.
<br />
[email protected]
###### March 6, 2020
* DASPRiD Directly return snackbar context in useSnackbar #223
* dalborgo Add support to set default variant on SnackbarProvider #180
* dalborgo Deprecate support for
children in enqueueSnackbar options.<br />
[email protected]
###### Feb 23, 2020
* @svish: Correct enqueueSnackbar typing #217
* @dgczhh: Make sure
onClose callback that's been passed through options parameter of enqueueSnackbar gets called when snackbar is closed using closeSnackbar function #220* @JoseLion: Add snackbar key to transition handler parameters. Fix transition handler callback types #214
<br />
[email protected]
###### Dec 1, 2019
* @PeterMK85: Add support for React portals #179
* @ly-vo: Pass
message (as well as key) in content prop callback #198* @simonbos: Allow safe override of
TransitionProps #194<br />
[email protected]
###### Nov 12, 2019
* @JimmyMultani: Allow snackbar key
0 to be passed #187* @williammetcalf: Allow preventDuplicate prop to be overridden by individual snackbar #188
* @simonbos: Fix
setState race condition #189* @kriim:
preventDuplicate by comparing keys (if specified) #190
<br />
[email protected]
###### Oct 16, 2019
* @mehmetkose @oliviertassinari: Improve bundle size #163
* @Grabauskas: Make sure published package is free of trash #185
<br />
[email protected]
###### Oct 10, 2019
* @Brettm12345: Add support to close snackbar on click away #182
* @Brettm12345: Add support to globally customize the default snackbar #180
<br />
[email protected]
###### Oct 6, 2019
* @FredyC: Prevent snackbar processing on
SnackbarProvider unmount #173* @nick-cromwell: Allow customising snackbar container styles #172
<br />
[email protected]
###### Sep 24, 2019
@ryan-gray: Remove deprecated materila-ui spacing unit #169
<br />
[email protected]
###### Sep 23, 2019
@vyushin: Add support for resizable snackbars #164
<br />
[email protected]
###### Sep 4, 2019
@ProtectedVoid: Improves accessibility of snackbars #153
<br />
[email protected]
###### Jul 23, 2019
@YIZHUANG: Allow overriding some of
iconVariants #136
<br />
[email protected]
###### Jun 29, 2019
@dgreuel: Bug fix - add prop-types to dependencies #139
<br />
[email protected]
###### Jun 25, 2019
@jhrinoa: Update prop-types versions in package.json #134
<br />
[email protected]
###### Jun 6, 2019
@eps1lon: Update peer dependency requirement for material-ui #119
<br />
[email protected]
###### May 22, 2019
@bcorbold: Add
types path to package.json for better IDE support #124<br />
[email protected]
###### May 18, 2019
* Fix minor bug with typescript definitions
#abd04cf<br />
[email protected]
###### May 15, 2019
@alexisab: Add support to close all snackbars at once #122
<br />
[email protected]
###### Apr 27, 2019
@jgodi: Allow snackbar children to be of type function #114
<br />
[email protected]
###### Apr 26, 2019
@YBogomolov
* Add support for multiple action buttons #107
<br />
[email protected]
###### Apr 19, 2019
@jhrinoa @ds009 @lukejagodzinski
* Add support for ref using React.forwardRef#84
* Add hoist-non-react-statics #111
* Capitalise - Rename withSnackbarProps interface to WithSnackbarProps. #109
[email protected]
###### Apr 1, 2019
Thanks to all contributers who improved notistack by opening an issue/PR.
@Methuselah96 @VincentLanglet
* Remove duplicate ClassNameMap from index.d.ts #104
[email protected]
###### Mar 30, 2019
Thanks to all contributers who improved notistack by opening an issue/PR.
@ecwyne @Lukas-Kullmann
* Completely deprecate and delete onPresentSnackbar method.
* Add support for hooks useSnackbar #83
* Add displayName to components exported by withSnackbar HOC #100
[email protected]
###### Mar 15, 2019
Thanks to all contributers who improved notistack by opening an issue/PR.
@amakhrov
* Fix typing for iconVariant props #91
[email protected]
###### Mar 5, 2019
Thanks to all contributers who improved notistack by opening an issue/PR.
@cwbuecheler @mpash @khhan1993 @Fs00 @martinmckenna
* Rename InjectedSnackbarProps to withSnackbarProps in type definitions #59
* Add new prop dense to allow dense margins for snackbars (suitable for mobiles) #58
* Improve performance and prevent unnecessary child re-rendering #39
[email protected]
###### Feb 24, 2019
Thanks to all contributers who improved notistack by opening an issue/PR.
@mckernanin @butchmarshall @VincentLanglet @oliviertassinari
* Move classnames and prop-types to dependencies #72
* Add option to preventDuplicate snackbars from getting into the queue. #67
* Add option to persist a notification until dismissed #42
* Add persist option and call onClose callback with reason: maxsnack when a snackbar is dismissed due to reaching maxSnack #62
[email protected]
###### Feb 5, 2019
Thanks to all contributers who improved notistack by opening an issue/PR.
@zsh1313 @james-cordeiro @xiromoreira
* Return event and reason in onClose callback #46
* Add support to close snackbars programmatically #20
[email protected]
###### Dec 10, 2018
Thanks to all contributers who improved notistack by opening an issue/PR.
@james-cordeiro @steinbergh @sethduncan @martinmckenna
* Allow snackbar messages of type node to be passed in enqueueSnackbar #34
* Allow snackbars with different heights to be stacked without overlapping on others #35
* Improve typings #37
[email protected]
###### Nov 29, 2018
* Fix issue where we couldn't add custom variant icon of type string (like emojies).
[email protected]
###### Nov 20, 2018
Thanks to all contributers who improved notistack by opening an issue/PR.
@nowaalex @nocksapp @nijk @ysgk
* Add support for onExited and onClose props. #21
* Add support to pass children via enqueueSnackbar. #23
* Support for enqueueing multiple snackbars at once. #14
* Fix bug "Uncaught Error". #26
[email protected]
###### Nov 19, 2018
Thanks to all contributers who improved notistack by opening an issue/PR.
@BornaP @pantharshit00
* Fix bug where user couldn't apply css classes to mui-Snackbar classes.root. #11
* Smaller default icon variants so they don't make snackbars larger in height.
* Remove material-ui Typography v2 warnings. #19
[email protected]
###### Oct 22, 2018
* More customisation:
* New prop hideIconVariant to hide iconVariant.
* Set variant of a snackbar to default, (which is the default value) and you'll have a naked snackbar ready to be customised.
* Using classes property, specify the styles applied to snackbars when variant is set to success, error, warning or info,
* Support for actions:
* Add action to all of the snackbars, or an individual snackbar.
* New feature:
* Customise snackbars individually, by options parameter of enqueueSnackbar method.
---
README
<p align="center">
<a href="https://notistack.com/" rel="noopener" target="_blank"><img src="https://user-images.githubusercontent.com/26996372/227733423-19064bf7-5176-4a0b-a1b6-cd80a7b32cdf.png" alt="notistack logo"></a></p>
</p>
<div align="center">
notistack: Display notifications with call of a function.
</div>
<div align="center">
Easy to use, customizable, smooth transitions, stack and queue them up!
</div>
<div align="center">
<a href="https://notistack.com">Documentation</a>
<span> · </span>
<a href="https://notistack.com/features/basic">Examples</a>
</br>
</br>
[](https://www.npmjs.com/package/notistack)
[](https://www.npmjs.com/package/notistack)
[](https://www.npmjs.com/package/notistack)
</div>
Table of Contents
--
- How to use
- Online demo
- Documentation
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 [email protected] |
| <= 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.</br>
Or play with a minimal working example: codesandbox </br>
Contribution
Open an issue and your problem will be solved.
Author - Contact
Hossein Dehnokhalaji
<a href="https://www.instagram.com/iamhosseindhv"><img src="https://github.com/iamhosseindhv/Rentaly/blob/master/Gifs/instagram.png" alt="Hossein Dehnokhalaji Instagram profile" align="right" width="32" height="32"/></a>
<a href="https://www.linkedin.com/in/iamhosseindhv"><img src="https://github.com/iamhosseindhv/Rentaly/blob/master/Gifs/linkedin.png" alt="Hossein Dehnokhalaji Linkedin profile" align="right" width="32" height="32"/></a>
<a href="mailto:[email protected]"><img src="https://github.com/iamhosseindhv/Rentaly/blob/master/Gifs/contact.png" alt="Hossein Dehnokhalaji email address" align="right" width="32" height="32"/></a>
---