notifications

A Customize And Easliy Use Alert Component For React.js

Nov 24, 2021
A Customize And Easliy Use Alert Component For React.js

react-custom-alert

  • Easy to set up and call alert function like calling a hook.
  • light weight. (gzipped : 1.3KB)
  • customize alert component.

React Custom Alert

Installation

$ npm install --save react-custom-alert $ yarn add react-custom-alert

Example

import React from 'react'; import { AlertContainer, alert } from 'react-custom-alert'; import 'react-custom-alert/index.css'; // import css file from root. function RootComponent() { return ( <> <App /> {/* Add ToastContainer from your root component. */} {/* If no floatingTime, the default is 3000ms. */} <ToastContainer floatingTime={5000} /> </> ); } function App() { // alert type : info | success | warning | error const alertInfo = () => alert({ message: 'info', type: 'info' }); const alertSuccess = () => alert({ message: 'success', type: 'success' }); const alertWarning = () => alert({ message: 'warning', type: 'warning' }); const alertError = () => alert({ message: 'error', type: 'error' }); return ( <div> <button onClick={alertInfo}>Info</button> <button onClick={alertSuccess}>Success</button> <button onClick={alertWarning}>Warning</button> <button onClick={alertError}>Error</button> </div> ); }

GitHub

https://github.com/gusrb3164/react-custom-alert

Recommended