https://github.com/avrcoelho/react-hook-notification
Add notifications in your React app. Types: success, error, warning, info or default
https://github.com/avrcoelho/react-hook-notification
hook hooks javascript javascript-library notifications react react-hooks toast toast-notifications typescript
Last synced: about 1 year ago
JSON representation
Add notifications in your React app. Types: success, error, warning, info or default
- Host: GitHub
- URL: https://github.com/avrcoelho/react-hook-notification
- Owner: avrcoelho
- License: mit
- Created: 2022-01-02T15:43:10.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-10-12T23:30:24.000Z (over 3 years ago)
- Last Synced: 2025-03-28T02:05:48.605Z (about 1 year ago)
- Topics: hook, hooks, javascript, javascript-library, notifications, react, react-hooks, toast, toast-notifications, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-hook-notification
- Size: 1.62 MB
- Stars: 25
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Hook Notification
Add notifications in your React app. Types: success, error, warning, info or default
## Storybook demo
[https://reverent-lalande-5e2160.netlify.app](https://reverent-lalande-5e2160.netlify.app/?path=/story/notification-example--notificaion)
## Install
```shell
npm install react-hook-notification
```
or
```shell
yarn add react-hook-notification
```
## Usage
```js
import React from 'react';
import { useNotification } from 'react-hook-notification';
export default function Component() {
const notification = useNotification();
return (
notification.success({
text: 'Notification test',
})
}
>
Dispatch
);
}
```
### Props
| Property | Type | Required | Default | Description |
| --------------- | ----------------------------------------------------------------------------------- | -------- | --------- | ----------------------------------- |
| text | string | yes | | Notification text |
| title | string | no | | Notification title |
| position | top-right \| top-center \| top-left \| bottom-right \| bottom-center \| bottom-left | no | top-right | Notification position |
| theme | colored \| light \| dark | no | colored | Notification theme |
| transition | bounce \| flip \| fade \| slide \| zoom | no | bounce | Notification transition |
| delay | number | no | 5000 | Notification delay in milliseconds |
| showProgressBar | boolean | no | true | Show or hide progress bar |
| showButtonClose | boolean | no | true | Show or hide close button |
| closeOnClick | boolean | no | true | Close on click |
| showIcon | boolean | no | true | Show or hide icon |
| autoClose | boolean | no | true | Close notification after delay ends |
| pauseOnHover | boolean | no | true | Auto close pause on hover |
| draggable | boolean | no | true | Enable or disable drag |
| titleMaxLines | number | no | 1 | Maximum number of lines for title |
| textMaxLines | number | no | 2 | Maximum number of lines for text |
## LICENSE
[](https://opensource.org/licenses/MIT)
Developed by: [André Coelho](https://andrecoelho.dev)