A simple react notification system
npm install doom-react-notifications:atom: react notifications made easy.
Why another react notification system ? Why not, this project appears from the need to have an easy and very customizable react library, and more important, to be a project who everyone can contribute to improve it.
Make your pull request with your ideas. 🧙♂️
- Fast and simple to use.
- Custom Notification component.
- Easy customization.
- Multiple notifications type.
- Multiple animations. (WIP)
Go to Documentation to look more features and functionalities.
visit the npm package npm package
First install the library you can use the package manager what you like.
``bash`
$ npm i doom-react-notifications
$ pnpm i doom-react-notifications
$ yarn add doom-react-notifications
First you need to know the notification object, have basic properties to manage the notification.
`jsx`
const notification = {
type: "success", // type of the notification (success, danger, error, info...)
title: "Title of the notification",
message: "body message of the notification",
};
To start using the library you only need to envolve your notification space in the component , then you can use the hook useNotification, the example below show you a simple case of use.
`jsx
import {
NotificationProvider,
NotificationConsumer,
} from "doom-react-notifications";
import { Button } from "./components/Button";
import "doom-react-notifications/dist/style.css"; // you can change the styles.
export default function App() {
return (
);
}
`
And then trigger the notification with the hook provided for the library.
`jsx
import {useNotification} from "doom-react-notifications";
export function Button () {
const { showNotification } = useNotification();
const handleClick = () => {
showNotification({
...
});
}
return (
)
}
`
#### Custom Notification Component 💅
You can create your own notification component with your custom structure and styles, to use it pass the custom component as Custom prop to , as show below.
` {title} {message} with custom skeletonjsx
// Create a component that is given all the necessary properties for the notification as a props.
const CustomNotification = ({ type, message, onClick }) => {
return (
);
};
// Then pass the component as Custom prop.
export default function App() {
return (
);
}
``
To make a contribution, open a pull request, i be glad to read and share ideas of how improve this project.