create-react-app<\/code>, etc. Then there are design systems like cosmos<\/a> that bring consistency to the way we make applications across different repositories using the same react components.<\/p>\nIn this blog we will look at how to build a reusable notification system and avoid the common pitfalls we would have picked up while ramping on React. Consider a notification\/alert\/toast popup component, as a component, it should have the ability to render whatever child components are passed to it and it should be able to close\/hide itself on click of the close button (or even close or hide itself after a set timeout). In the simplest of designs the engineer would use a prop drilling pattern and pass an onClose function to the toast component which would be able to toggle the state in the parent component that hosts our notifications.<\/p>\n
This, by design, is not wrong. However, from a developer experience perspective, why should the parent component host the function that would be responsible for hiding\/closing the notification. This responsibility should be with the component itself. What makes the react-notifier highly reusable is the fact that any other component using it does not have to worry about the state (hide\/show or open\/close) of the notification component, rather it exposes an add and remove method that takes care of the states for you.<\/p>\n
This traditionally is possible managing a global state using redux. However, in the spirit of embracing the latest react feature we would be using react hooks and the context API to achieve the same. Excited enough? Let’s jump in!!<\/p>\n
Building a reusable notification system with react hooks and context API<\/h2>\n
The notification system is built with React and no external library. The toast notifications will be stackable, meaning we can have multiple notifications showing up at the same time. These will be capable of rendering a string or another react component within itself.<\/p>\n
Background<\/h3>\n
The following assumes that the reader has a thorough understanding of React and React hooks. For a detailed understanding of React-hooks please refer the react hooks docs<\/a>.<\/p>\nWe will be using the following hooks<\/p>\n
\nuseState<\/code>, this allows us to use the react state within functional components (this earlier used to be possible only in class-based components and functional components were used only as presentational components)<\/li>\nuseContext<\/code>, this hook takes a context object as an input and returns the value passed in Context.Provider<\/code>. React context API provides a way to pass the props\/data in a component tree without having to pass the props\/data to every child at every level (prop drilling)<\/li>\n<\/ul>\nBelow is the syntax for the context API for reference<\/p>\n
\nconst SampleContext = React.createContext(\/*initialVAlue*\/);\r\n\/\/ wrap the parent component with the context provider\r\n<SampleContext.Provider value={\/*value*\/}>\r\n .\r\n .\r\n .\r\n .\r\n \/* n level child can access the provider value using useContext() *\/\r\n const context = React.useContext(SampleContext)\r\n <SomeComponent>\r\n <Button onClick={context.someMethod}\/>\r\n <\/SomeComponent>\r\n<\/SampleContext.Provider><\/code><\/pre>\n<\/div>\n\nuseReducer<\/code>, this is a custom hook baked into react hooks, which provides a redux reducer like interface. The reducer takes an initial state and action object having type and a payload, based on the type the initial state is recreated (pure function) and returned. A dispatch function is used to trigger the reducer switch.<\/li>\n<\/ul>\nThe usage of useReducer<\/code> is copied from the react docs.<\/p>\n\n\/\/ the reducer function that provides new state based on action.type\r\nfunction todosReducer(state, action) {\r\n switch (action.type) {\r\n case 'add':\r\n return [\r\n ...state,\r\n {\r\n text: action.text,\r\n completed: false\r\n }\r\n ];\r\n \/\/ ... other actions ...\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\n\/\/ the useReducer function keeps track of the state and returns the new state and a dispatcher function.\r\nfunction useReducer(reducer, initialState) {\r\n const [state, setState] = useState(initialState);\r\n\r\n function dispatch(action) {\r\n const nextState = reducer(state, action);\r\n setState(nextState);\r\n }\r\n\r\n return [state, dispatch];\r\n}\r\n\r\n\/\/ Sample usage of the useReducer.\r\nfunction Todos() {\r\n const [todos, dispatch] = useReducer(todosReducer, []);\r\n\r\n function handleAddClick(text) {\r\n dispatch({ type: 'add', text });\r\n }\r\n\r\n \/\/ ...\r\n}<\/code><\/pre>\n<\/div>\nLets build<\/h3>\nNote: we will be using create-react-app to scaffold a basic react app, also please install the latest stable version of NodeJS.<\/p><\/blockquote>\n
Create a basic react app using the create-react-app<\/code>.<\/p>\n\n$: npx create-react-app react-notifier\r\n$: cd react-notifier\r\n$: npm run start # this will start a development server at http:\/\/localhost:3000\/<\/code><\/pre>\n<\/div>\nNow open the created project in your favourite code editor, and edit src\/App.js<\/code> to have<\/p>\n\n\/\/ src\/App.js\r\nimport React from 'react';\r\nimport '.\/App.css';\r\n\r\nfunction App() {\r\n return <div className=\"App\">Hello<\/div>;\r\n}\r\n\r\nexport default App;<\/code><\/pre>\n<\/div>\nAlso edit src\/App.css<\/code> to have the below code.<\/p>\n\n.App {\r\n text-align: left;\r\n}<\/code><\/pre>\n<\/div>\nNext create a folder structure as below:<\/p>\n
![](\"https:\/\/s3-ap-southeast-1.amazonaws.com\/rzp-prod-outline-wiki\/uploads\/ea446fe4-aa8a-471c-aea4-294bd22c3258\/636db588-eb32-4469-a952-8d3dd5efee80\/folder_structure.png\")
<\/div>\nWe call our notification component Toast.<\/p>\n
Lets create the Toast Component<\/h3>\n
This will be a simple component that takes an array and renders the same based on whether the element of the array is a function or an object<\/p>\n
\n\/\/ src\/components\/Toast\r\n\r\nimport React from 'react';\r\n\r\nexport default function Toast({ toast }) {\r\n \/\/ function to decide how to render the content of the toast\r\n function renderItem(content) {\r\n if (typeof content === 'function') {\r\n return content();\r\n } else {\r\n return <pre>{JSON.stringify(content, null, 2)}<\/pre>;\r\n }\r\n }\r\n return (\r\n <div className=\"toast\">\r\n <div className=\"toast-container\">\r\n {\/* Displaying each element of the toast *\/}\r\n {toast.map(t => {\r\n return (\r\n <div\r\n className={`toast-container-item ${t.type ? t.type : ''}`}\r\n key={t.id}\r\n >\r\n <span role=\"img\" aria-label=\"close toast\" className=\"toast-close\">\r\n ×\r\n <\/span>\r\n {renderItem(t.content)}\r\n <\/div>\r\n );\r\n })}\r\n <\/div>\r\n <\/div>\r\n );\r\n}<\/code><\/pre>\n<\/div>\nwe will be using .scss<\/code> for defining the CSS<\/p>\nNote: Please run npm install --save node-sass<\/code> to compile .scss<\/code> files<\/p><\/blockquote>\n\n\/\/ styles\/base.scss\r\n\/\/ base colors\r\n$black: #212121;\r\n$white: #fff;\r\n$gray: #e0e0e0;\r\n$primaryBlue: #1652f0;\r\n$hoverBlue: #154de0;\r\n$red: #d9605a;\r\n\/\/ fonts\r\n$code: 'Oxygen Mono', monospace;\r\n\r\n\/\/ styles\/toast.scss\r\n@import '.\/base.scss';\r\n.toast {\r\n position: fixed;\r\n top: 50px;\r\n right: 10px;\r\n width: 300px;\r\n max-height: 90vh;\r\n overflow-y: scroll;\r\n font-family: $code;\r\n .toast-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n .toast-container-item {\r\n border: $primaryBlue solid 1px;\r\n margin: 5px 0px;\r\n padding: 2px;\r\n border-radius: 4px;\r\n width: 100%;\r\n min-height: 100px;\r\n word-wrap: break-word;\r\n background-color: $black;\r\n box-shadow: 4px 4px 15px 2px rgba(black, 0.75);\r\n color: $white;\r\n transition: 0.2s;\r\n &:not(:first-child) {\r\n margin-top: -3rem;\r\n }\r\n \/\/ &:hover,\r\n \/\/ &:focus-within {\r\n \/\/ transform: translateX(-2rem);\r\n \/\/ }\r\n &:hover ~ .toast-container-item,\r\n &:focus-within ~ .toast-container-item {\r\n transform: translateY(3rem);\r\n }\r\n\r\n &.info {\r\n border: $primaryBlue solid 1px;\r\n background-color: $hoverBlue;\r\n }\r\n &.danger {\r\n border: $red solid 1px;\r\n background-color: $red;\r\n }\r\n .toast-close {\r\n cursor: pointer;\r\n position: relative;\r\n top: 5px;\r\n font-size: 20px;\r\n font-weight: 800;\r\n }\r\n }\r\n }\r\n}<\/code><\/pre>\n<\/div>\nWe use position: fixed;<\/code> along with the top and right attributes to have the toast notification appear from the top-right corner of the screen.<\/p>\nSubsequently, we use the display: flex;<\/code> property in the toast-container<\/code>, to have a flexible layout<\/p>\nTo know more on flex please refer: A complete guide to flexbox<\/a><\/p>\nNext, let us define our ToastContext<\/code> so that we can trigger the component from anywhere in the application<\/p>\n\n\/\/ contexts\/ToastContext.js\r\n\r\nimport React, { createContext, useReducer, useContext } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport Toast from '..\/components\/Toast';\r\nimport '..\/styles\/toast.scss';\r\n\r\nexport const ToastContext = createContext();\r\n\r\nconst initialState = [];\r\n\r\nexport const ADD = 'ADD';\r\nexport const REMOVE = 'REMOVE';\r\nexport const REMOVE_ALL = 'REMOVE_ALL';\r\n\r\nexport const toastReducer = (state, action) => {\r\n switch (action.type) {\r\n case ADD:\r\n return [\r\n ...state,\r\n {\r\n id: +new Date(),\r\n content: action.payload.content,\r\n type: action.payload.type\r\n }\r\n ];\r\n case REMOVE:\r\n return state.filter(t => t.id !== action.payload.id);\r\n case REMOVE_ALL:\r\n return initialState;\r\n default:\r\n return state;\r\n }\r\n};\r\n\r\nexport const ToastProvider = props => {\r\n const [toast, toastDispatch] = useReducer(toastReducer, initialState);\r\n const toastData = { toast, toastDispatch };\r\n return (\r\n <ToastContext.Provider value={toastData}>\r\n {props.children}\r\n\r\n {createPortal(<Toast toast={toast} \/>, document.body)}\r\n <\/ToastContext.Provider>\r\n );\r\n};\r\n\r\nexport const useToastContext = () => {\r\n const ToastContext = React.useContext(ToastContext);\r\n if (ToastContext === undefined) {\r\n throw new Error('useToastContext must be used within a ToastConextProvider');\r\n }\r\n return ToastContext;\r\n};<\/code><\/pre>\n<\/div>\nLet’s break down the above code.<\/p>\n
We initialise an empty react context using React.createContext();<\/code>, next we prepare the actions that would be required for the notification system, these can be put in separate files if the application becomes bigger and has a lot of actions (to remove conflicting actions),<\/p>\n\nexport const ADD = 'ADD';\r\nexport const REMOVE = 'REMOVE';\r\nexport const REMOVE_ALL = 'REMOVE_ALL';<\/code><\/pre>\n<\/div>\nNext is the reducer function that takes the initial state as an empty array and based on the action.type pushes to the array or removes while returning a new state.<\/p>\n
We also provide an ID to all new entries in toast array, which makes it easier to remove the said target toast\/notification.<\/p>\n
We then create a Provider function that provides the value to the empty context created via, <Context.Provider><\/code> We combine the returned newState and the dispatcher function from the useReducer hook and send these as values via context API.<\/p>\nWe use the React.createPortal<\/code> to render the toast component in the document.body, this provides easier\/less conflicting styling and document flow.<\/p>\nLastly, we expose the useContext (an easier to use version of <Context.Consumer><\/code>) hook via a custom hook.<\/p>\nUpdate the toast component to use the useToastContext<\/code> hook so that it can have its own dispatcher to close the toast\/notification from within the component<\/p>\n\n\/\/ src\/components\/Toast.js\r\nimport React from 'react';\r\n\r\nimport { useToastContext, REMOVE } from '..\/contexts\/ToastContext';\r\n\r\nexport default function Toast({ toast }) {\r\n const { toastDispatch } = useToastContext();\r\n function renderItem(content) {\r\n if (typeof content === 'function') {\r\n return content();\r\n } else {\r\n return <pre>{JSON.stringify(content, null, 2)}<\/pre>;\r\n }\r\n }\r\n return (\r\n <div className=\"toast\">\r\n <div className=\"toast-container\">\r\n {toast.map(t => {\r\n return (\r\n <div\r\n className={`toast-container-item ${t.type ? t.type : ''}`}\r\n key={t.id}\r\n >\r\n <span\r\n role=\"img\"\r\n aria-label=\"close toast\"\r\n className=\"toast-close\"\r\n onClick={() =>\r\n toastDispatch({ type: REMOVE, payload: { id: t.id } })\r\n }\r\n >\r\n ×\r\n <\/span>\r\n {renderItem(t.content)}\r\n <\/div>\r\n );\r\n })}\r\n <\/div>\r\n <\/div>\r\n );\r\n}<\/code><\/pre>\n<\/div>\nTo see the above in action, let’s make some basic routes and navigation using the react-router-dom<\/code>.<\/p>\n\n$: npm install -s react-router-dom<\/code><\/pre>\n<\/div>\nSince the following will be made only to show the usage of the Toast Component, we will be defining the components for each route within src\/App.js<\/code> file.<\/p>\nDefining the home component<\/h3>\n\nexport const Home = () => {\r\n const { toastDispatch } = useToastContext();\r\n return (\r\n <div>\r\n <button\r\n onClick={() =>\r\n toastDispatch({\r\n type: ADD,\r\n payload: {\r\n content: { sucess: 'OK', message: 'Hello World' }\r\n }\r\n })\r\n }\r\n >\r\n Show basic notification\r\n <\/button>\r\n <\/div>\r\n );\r\n};<\/code><\/pre>\n<\/div>\nThe above is a simple component that renders a button, the onClick of the button dispatches an action with type: ADD<\/code> some content and optionally a type of info<\/code> or danger.<\/code> This is used to render the background colour of the toast\/notification.<\/p>\nSimilarly, we will define some other components just to show various types of toast components use cases.<\/p>\n
The final scr\/App.js<\/code> file is below<\/p>\n\nimport React from 'react';\r\nimport { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';\r\nimport '.\/App.css';\r\nimport { useToastContext, ADD, REMOVE_ALL } from '.\/contexts\/ToastContext';\r\n\r\nexport const Home = () => {\r\n const { toastDispatch } = useToastContext();\r\n return (\r\n <div>\r\n <button\r\n onClick={() =>\r\n toastDispatch({\r\n type: ADD,\r\n payload: {\r\n content: { sucess: 'OK', message: 'Hello World' }\r\n }\r\n })\r\n }\r\n >\r\n Show basic notification\r\n <\/button>\r\n <\/div>\r\n );\r\n};\r\nexport const Info = () => {\r\n const { toastDispatch } = useToastContext();\r\n return (\r\n <div>\r\n <button\r\n onClick={() =>\r\n toastDispatch({\r\n type: ADD,\r\n payload: {\r\n content: { sucess: 'OK', message: 'Info message' },\r\n type: 'info'\r\n }\r\n })\r\n }\r\n >\r\n Show Info notification\r\n <\/button>\r\n <\/div>\r\n );\r\n};\r\n\r\nexport const Danger = () => {\r\n const { toastDispatch } = useToastContext();\r\n return (\r\n <div>\r\n <button\r\n onClick={() =>\r\n toastDispatch({\r\n type: ADD,\r\n payload: {\r\n content: { sucess: 'FAIL', message: 'Something nasty!' },\r\n type: 'danger'\r\n }\r\n })\r\n }\r\n >\r\n Show danger notification\r\n <\/button>\r\n <\/div>\r\n );\r\n};\r\n\r\nexport const CutomHTML = () => {\r\n const { toastDispatch } = useToastContext();\r\n return (\r\n <div>\r\n <button\r\n onClick={() =>\r\n toastDispatch({\r\n type: ADD,\r\n payload: {\r\n content: () => {\r\n return (\r\n <div>\r\n <h4>Error<\/h4>\r\n <p>Something nasty happened!!<\/p>\r\n <\/div>\r\n );\r\n },\r\n type: 'danger'\r\n }\r\n })\r\n }\r\n >\r\n Show danger notification with custom HTML\r\n <\/button>\r\n <\/div>\r\n );\r\n};\r\n\r\nexport default function App() {\r\n const { toast, toastDispatch } = useToastContext();\r\n function showClearAll() {\r\n if (toast.length) {\r\n return (\r\n <button\r\n onClick={() =>\r\n toastDispatch({\r\n type: REMOVE_ALL\r\n })\r\n }\r\n >\r\n Clear all notifications\r\n <\/button>\r\n );\r\n }\r\n }\r\n return (\r\n <div className=\"App\">\r\n <Router>\r\n <ul>\r\n <li>\r\n <Link to=\"\/\">Home<\/Link>\r\n <\/li>\r\n <li>\r\n <Link to=\"\/info\">Info<\/Link>\r\n <\/li>\r\n <li>\r\n <Link to=\"\/danger\">Danger<\/Link>\r\n <\/li>\r\n <li>\r\n <Link to=\"\/custom-html\">Custom HTML<\/Link>\r\n <\/li>\r\n <\/ul>\r\n <Switch>\r\n <Route exact path=\"\/\">\r\n <Home \/>\r\n <\/Route>\r\n <Route exact path=\"\/info\">\r\n <Info \/>\r\n <\/Route>\r\n <Route exact path=\"\/danger\">\r\n <Danger \/>\r\n <\/Route>\r\n <Route exact path=\"\/custom-html\">\r\n <CutomHTML \/>\r\n <\/Route>\r\n <\/Switch>\r\n <\/Router>\r\n <br \/>\r\n {showClearAll()}\r\n <\/div>\r\n );\r\n}<\/code><\/pre>\n<\/div>\n
![\"Razorpay](\"https:\/\/d6xcmfyh68wv8.cloudfront.net\/blog-content\/uploads\/2019\/11\/Banner-Image-4.png\")
<\/p>\n