A Redux friendly notification system for React
You can check some working examples here I'm still creating the Examples
page :)
npm install renotify -S
Renotify uses Redux under the hood, and also has some cool features to use with it, but let stick with the basics:
First of all, it's a good idea to import the default styles, to make it look pretty. Don't worry, there are some ways you can customize those.
If you use webpack with a CSS loader:
import 'renotify/style.css';
Or the old school way:
<link rel="stylesheet" href="node_modules/renotify/style.css">
The library interface was heavily inspired by react-redux
, so in order to use Renotify, you need to wrap your application with the NotificationContainer
component.
import {NotificationContainer} from 'renotify';
function App() {
return (
<NotificationContainer>
<CustomButton />
</NotificationContainer>
);
}
After that, you should use the high order component renotify
to wrap the component you want to dispatch notifications:
import {renotify} from 'renotify';
function CustomButton({notify}) {
return (
<button onClick={() => {
notify({
title: 'Some Title',
message: 'Some message'
});
}}>send notification</button>
);
}
export default renotify()(CustomButton)
And that's it! this is the simples way to use Renotify. Now, let's do some cooler stuff.
Remember the cool features I mentioned that Renotify has with Redux? Here you'll learn how to use the Renotify Middlewares.
The idea of using middlewares with Renotify is to make it easier to show notifications when some particular action is dispatched inside Redux.
First of all, you should configure the renotify reducer with your application root reducer (Don't worry, Renotify won't mess up with your data).
import {reducer} from 'renotify';
const reducers = combineReducers({
yourReducer,
$$renotify: reducer // The property name MUST be $$renotify
});
Now you can configure the Renotify middleware, to map all the actions you want to trigger a notification, and the notification configs.
import {createMiddleware} from 'renotify';
const renotifyMiddleware = createMiddleware({
SOME_ACTION: {
title: 'Middleware Notification',
message: 'This notification is automagically comming from a middleware'
}
});
After that you can configure the redux store, and pass it to the Provider
.
const store = createStore(reducers, applyMiddleware(renotifyMiddleware));
function App() {
render() {
return (
<Provider store={store}>
<NotificationContainer>
<CustomButton />
</NotificationContainer>
</Provider>
);
}
}
Now every time the SOME_ACTION
actions is triggered, a notification will appear for the user, no need to manually trigger the notify
method. Yay!
Configuring the reducer internally in your application is only useful when you want to use the middleware.
The renotify
high order component accepts some default configuration for the notifications triggered by that component. Let's take the CustomButton
as an example:
export default renotify({
Title: 'Default Title'
})(CustomButton);
Now if you don't provide the title
property for the notifications inside CustomButton
, by default it'll have the text Default Title
Similar to the previous topic, you can also provide some default configuration for all the notifications that will be triggered on your application:
<NotificationContainer notificationShape={{
title: 'Default Title',
message: 'Default Message'
}}>
<CustomButton />
</NotificationContainer>
So, there are a couple of things you can do with the notify
method:
You can configure the timeout for the notification to disappear:
notify({
title: '...',
message: '...',
dismissTimeout: 2000 // Notification will disappear in 2 seconds
});
Or you can configure it to never automatically be dismissed, only when the user clicks in the "dismiss" button:
notify({
title: '...',
message: '...',
dismiss: false // Setting this to false will disable the automatic dismiss.
});
You can attach 2 simple hooks to the notification, when it's created:
notify({
title: '...',
message: '...',
onAdd: () => console.log('Notification entering'), // triggered when the notification enters
onRemove: () => console.log('Notification leaving'), // triggered when the notification is about to leave
});
You don't need to use the automatic dismiss
button for everything... You can easily customize these using the actions
property.
notify({
title: '...',
message: '...',
actions: [{
label: 'Alert', // `label` is the text that will appear in the button
callback: () => { // `callback` will be triggered once the button is clicked
// This callback simply alerts `Cheese!`, and won't dismiss the notification
alert('Cheese!')
}
}, {
label: 'Callback Close',
// the `closeNotification` method is passed as parameter to the callback
callback: (closeNotification) => {
alert('Notification will be closed after this alert');
closeNotification(); // Dismisses the notification
}
}, {
// If no `callback` is provided, it will dimiss the notification once the button is clicked
label: 'Close'
}]
});
You don't need to use the default template if you don't want to... You can create a hole new template for the notifications:
// Template must be a valid React Component
// it'll receives `title`, `message` and `actions` as props
const NotificationTemplate = ({title, message, actions}) => (
<div>
{title}<br />
{message}<br />
{actions}
</div>
);
notify({
title: '...',
message: '...',
Template: NotificationTemplate
});
As an easy to use solution, Renotify provides 3 different types of notifications out of the box.
notify({
title: '...',
message: '...',
type: 'success' // You can also use `warning` or `danger`
});