This content originally appeared on DEV Community and was authored by Semir Teskeredzic
Proper notifications are crucial for functional UI. Imagine you are using one of many web applications and you enter a wrong password or any kind of input just to see that nothing happens and you are left baffled. That is why integrating notifications, alerts or other kind of signals what has happened is important for any application with user interface.
In this post I will go through the simple integration of react-notifications-component library that has some 23k of weekly downloads on npmjs.com.
Add package to your project
You can use npm to add this package:
$ npm i react-notifications-component
Then you need to build library:
$ npm run build:library:dev
You are ready to go! Now you can start your application
Import and Setup
Now in your App.js you need to import ReactNotification and its css file like so:
import ReactNotification from 'react-notifications-component'
import 'react-notifications-component/dist/theme.css'
Now we put ReactNotification component alongdside of our main app content in order not to collide with other absolute positioned elements:
function App() {
return (
<div>
<ReactNotification />
<Application />
</div>
)
}
export default App;
We are now ready to use notification when we need it.
Use in Component
Let's say you have a small component that throws a great success notification when you enter your name and click hello button and it throws bad red notification when you don't enter your name but nevertheless click hello button.
First we import store from our new package:
import { store } from 'react-notifications-component'
Notification is called like this:
store.addNotification({
title: "Success!",
message: "You have been successful!",
type: "success",
insert: "top",
container: "top-right",
animationIn: ["animate__animated", "animate__fadeIn"],
animationOut: ["animate__animated", "animate__fadeOut"],
dismiss: {
duration: 5000,
onScreen: false
}
});
To see the notification in action we will create a component that will evaluate if the user entered name, if yes then success notification will be executed if not then danger notification will be executed. So here is a simple component:
import React, { useState } from "react";
import { store } from "react-notifications-component";
function Application() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
if (name) {
store.addNotification({
title: "Great",
message: `Hello ${name}`,
type: "success",
insert: "top",
container: "top-right",
animationIn: ["animate__animated", "animate__fadeIn"],
animationOut: ["animate__animated", "animate__fadeOut"],
dismiss: {
duration: 5000,
onScreen: false
}
});
setName("");
} else {
store.addNotification({
title: "OOh OOh!",
message: "Don't be shy!",
type: "danger",
insert: "top",
container: "top-right",
animationIn: ["animate__animated", "animate__fadeIn"],
animationOut: ["animate__animated", "animate__fadeOut"],
dismiss: {
duration: 5000,
onScreen: false
}
});
}
};
return (
<>
<input
value={name}
onChange={(e) => handleChange(e)}
placeholder="Enter name here!"
/>
<button onClick={(e) => handleSubmit(e)}>Say Hello</button>
</>
);
}
export default Application;
Simple setup is available in codesandbox here
You can configure notifications object with values:
Position:
container:
- top-left
- top-right
- top-center
- center
- bottom-left
- bottom-right
- bottom-center
Types:
type:
- success
- danger
- info
- default
- warning
You can find more in the package documentation here.
Thank you for reading and happy notifying!
This content originally appeared on DEV Community and was authored by Semir Teskeredzic
Semir Teskeredzic | Sciencx (2021-06-13T20:32:24+00:00) Add Notifications to your React application. Retrieved from https://www.scien.cx/2021/06/13/add-notifications-to-your-react-application/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.