react-notifications-component\r\n```js\r\nimport { ReactNotifications } from 'react-notifications-component'\r\n```\r\nImport the CSS theme\r\n```js\r\nimport 'react-notifications-component/dist/theme.css'\r\n```\r\n\r\n##### SASS\r\nSASS files are located in `react-notifications-component/dist/scss`\r\n\r\nRender react-notifications-component at the top of your application so that it does not conflict with other absolutely positioned DOM elements.\r\n```jsx\r\nconst App = () => {\r\n return (\r\n Store where needed - will be used to access `addNotification` and `removeNotification` API methods\r\n```js\r\nimport { Store } from 'react-notifications-component';\r\n```\r\n\r\nThen call `addNotification` and watch the magic happens\r\n\r\n```jsx\r\nStore.addNotification({\r\n title: \"Wonderful!\",\r\n message: \"teodosii@react-notifications-component\",\r\n type: \"success\",\r\n insert: \"top\",\r\n container: \"top-right\",\r\n animationIn: [\"animate__animated\", \"animate__fadeIn\"],\r\n animationOut: [\"animate__animated\", \"animate__fadeOut\"],\r\n dismiss: {\r\n duration: 5000,\r\n onScreen: true\r\n }\r\n});\r\n```\r\n\r\nVoila!\r\n\r\n**Note**: We rely on `animate.css` in this example as `animate__fadeIn` and `animate__fadeOut` are part of `animate.css`. We recommend using it as it's an excellent animation library, but you're not forced to. If you prefer you may also use your custom animations as long as they're valid CSS animations.\r\n\r\n**Note**: `animate.css` latest version (`v4`) has breaking changes. It introduces `animate__` prefix so that existing classes don't clash. If you still would like to use classes without prefix you can import `animate.css/animate.compat.css`\r\n```js\r\n// preferred way to import (from `v4`). Uses `animate__` prefix.\r\nimport 'animate.css/animate.min.css';\r\n\r\n// Alternate way to use classes without prefix like `animated fadeIn`\r\nimport 'animate.css/animate.compat.css'\r\n```\r\n\r\nIn the examples, we will be using classes with `animate__` prefix, which is the default behaviour of latest `v4` version of `animate.css`.\r\n\r\nFor more info on how to use `animate.css`, please refer to [animate.css docs](https://animate.style/)\r\n\r\n## API\r\n\r\n`Store.addNotification(options)`\r\n\r\nRender a new notification. Method returns a unique id for the rendered notification. Supplied options are internally validated and an exception will be thrown if validation fails.\r\n\r\n`Store.removeNotification(id)`\r\n\r\nManually remove a notification by id.\r\n\r\n\r\n## Examples\r\n\r\n\r\n\r\nIn the following examples for brevity some options will not be mentioned. Strictly focusing on the needed options to present each example. For reference, we will be using Object spread operator on a `notification` object to have non relevant fields included as well.\r\n\r\n```js\r\nnotification = {\r\n title: \"Wonderful!\",\r\n message: \"Configurable\",\r\n type: \"success\",\r\n insert: \"top\",\r\n container: \"top-right\",\r\n animationIn: [\"animate__animated animate__fadeIn\"], // `animate.css v4` classes\r\n animationOut: [\"animate__animated animate__fadeOut\"] // `animate.css v4` classes\r\n};\r\n```\r\n\r\n#### Notification container\r\n\r\nYou have in total 6 containers for desktop and 2 for mobile, if component is set to be responsive. List of containers:\r\n\r\n* `top-left`\r\n* `top-right`\r\n* `top-center`\r\n* `center`\r\n* `bottom-left`\r\n* `bottom-right`\r\n* `bottom-center`\r\n\r\n```js\r\nStore.addNotification({\r\n ...notification,\r\n container: 'top-right'\r\n})\r\n```\r\n\r\nWill position the notification in top right of the screen.\r\n\r\n#### Notification type\r\n\r\nList of types:\r\n\r\n* `success`\r\n* `danger`\r\n* `info`\r\n* `default`\r\n* `warning`\r\n\r\n\r\n```js\r\nStore.addNotification({\r\n ...notification,\r\n type: 'danger'\r\n})\r\n```\r\n\r\nWill trigger a `danger` notification.\r\n\r\n#### Animating\r\n \r\n```js\r\nStore.addNotification({\r\n ...notification, \r\n animationIn: ['animate__animated animate__fadeIn'], // `animate.css v4` classes\r\n animationOut: ['animate__animated animate__fadeOut'] // `animate.css v4` classes\r\n})\r\n```\r\n\r\n`animationIn` and `animationOut` rely on CSS classes that toggle animations. On github pages we rely on `animate.css`, we suggest you to import that package and use their animations as they have plenty.\r\n\r\n**Note**: Failing to have animations set properly will lead to bugs in some causes, as `react-notifications-component` relies on `onAnimationEnd` event to know when an animation has finished.\r\n\r\n#### Dismiss notification automatically after timeout expires\r\n\r\n```js\r\nStore.addNotification({\r\n ...notification,\r\n dismiss: {\r\n duration: 2000\r\n }\r\n})\r\n```\r\n\r\n#### Dismiss notification automatically with the time left shown on UI\r\n\r\n```js\r\nStore.addNotification({\r\n ...notification,\r\n dismiss: {\r\n duration: 2000,\r\n onScreen: true\r\n }\r\n})\r\n```\r\n\r\n#### Subscribe to notification's removal\r\n\r\nEasily subscribe to `onRemoval` by supplying callback as option to the notification object. Callback will get called after the removal animation finishes.\r\n\r\n```js\r\nStore.addNotification({\r\n ...notification,\r\n onRemoval: (id, removedBy) => {\r\n ...\r\n }\r\n})\r\n```\r\n\r\n#### Pause notification's timeout by hovering\r\n\r\n```js\r\nStore.addNotification({\r\n ...notification,\r\n dismiss: {\r\n duration: 2000,\r\n pauseOnHover: true\r\n }\r\n})\r\n```\r\n\r\n#### Change transition\r\n\r\n```js\r\nStore.addNotification({\r\n ...notification,\r\n slidingExit: {\r\n duration: 800,\r\n timingFunction: 'ease-out',\r\n delay: 0\r\n }\r\n})\r\n```\r\n\r\n`slidingEnter`, `touchRevert` and `touchSlidingExit` can all be configured in the same way, with the mention that `touchSlidingExit` has 2 transitions nested.\r\n\r\n```js\r\nStore.addNotification({\r\n ...notification,\r\n touchSlidingExit: {\r\n swipe: {\r\n duration: 400,\r\n timingFunction: 'ease-out',\r\n delay: 0,\r\n },\r\n fade: {\r\n duration: 400,\r\n timingFunction: 'ease-out',\r\n delay: 0\r\n }\r\n }\r\n})\r\n```\r\n\r\n## Props\r\n\r\n| Name | \r\nType | \r\nDescription | \r\n
|---|---|---|
isMobile | \r\n Boolean | \r\n Set whether you want component to be responsive or not. To be used together with breakpoint | \r\n
breakpoint | \r\n Number | \r\n Breakpoint for responsiveness - defaults to 768px | \r\n
types | \r\n Array | \r\n Custom types | \r\n
className | \r\n string | \r\n Classes assigned to the container | \r\n
id | \r\n string | \r\n Id of the container | \r\n
| Name | \r\nType | \r\nDescription | \r\n
|---|---|---|
id | \r\n String | \r\n Id of the notification. Supply option only if you prefer to have custom id, otherwise you should let the component handle generation for you. | \r\n
onRemoval | \r\n Function | \r\n Gets called on notification removal with id and removedBy arguments | \r\n
title | \r\n String, React Node or Functional Component | \r\n Title of the notification. Option is ignored if content is set, otherwise it is required. | \r\n
message | \r\n String, React Node or Functional Component | \r\n Message of the notification. Option is ignored if content is set, otherwise it is required. | \r\n
content | \r\n Object | \r\n Custom notification content, must be either Class Component, Functional Component or React element. If being supplied as functional or class component, id and notificationConfig will be supplied as prop. notificationConfig will return the parsed notification object as defined in the library. | \r\n
type | \r\n String | \r\n Type of the notification. Option is ignored if content is set, otherwise it is required. | \r\n
container | \r\n String | \r\n Container in which the notification will be displayed. Option is required. | \r\n
insert | \r\n String | \r\n Specify where to append notification into the container - top or bottom. Option defaults to top. | \r\n
dismiss | \r\n Dismiss | \r\n Specify how a notification should be dismissed. | \r\n
animationIn | \r\n Array | \r\n Array of CSS classes for animating the notification's entrance. | \r\n
animationOut | \r\n Array | \r\n Array of CSS classes for animating the notification's exit. | \r\n
slidingEnter | \r\n Transition | \r\n Transition to be used when sliding to show a notification. | \r\n
slidingExit | \r\n Transition | \r\n Transition to be used when sliding to remove a notification. | \r\n
touchRevert | \r\n Transition | \r\n Transition to be used when sliding back after an incomplete swipe. | \r\n
touchSlidingExit | \r\n Transition | \r\n Transition to be used when sliding on swipe. | \r\n
width | \r\n Number | \r\n Overwrite notification's width defined by CSS | \r\n
Transition is used each time you define a transition.\r\n\r\n| Name | \r\nType | \r\nDescription | \r\n
|---|---|---|
duration | \r\n Number | \r\n Transition duration in ms. Its default value ranges from 300 to 600, depending on transition | \r\n
timingFunction | \r\n String | \r\n CSS timing function for the transition, defaults to linear | \r\n
delay | \r\n Number | \r\n Delay of the transition in ms, defaults to 0 | \r\n
Dismiss is used to describe how a notification should be dismissed.\r\n\r\n| Name | \r\nType | \r\nDescription | \r\n
|---|---|---|
duration | \r\n Number | \r\n Time in milliseconds after notification gets dismissed. 0 will act as infinite duration. Defaults to 0 | \r\n
onScreen | \r\n Boolean | \r\n Show time left directly on the notification. Defaults to false | \r\n
pauseOnHover | \r\n Boolean | \r\n Hovering over notification will pause the dismiss timer. Defaults to false | \r\n
waitForAnimation | \r\n Boolean | \r\n When removing a notification by default we trigger the exit animation and the transition to height 0 at the same time. Setting this to true will wait for the exit animation to finish and then start the transition to height 0. Defaults to false | \r\n
click | \r\n Boolean | \r\n Enable dismissal by click, defaults to true | \r\n
touch | \r\n Boolean | \r\n Enable dismiss by touch move, defaults to true | \r\n
showIcon | \r\n Boolean | \r\n Show or hide the close icon, defaults to false. If set to true, it will respond to click interaction and will remove notification | \r\n