react-slide-alerts

The react-slide-alerts have beautiful alerts with a slide animation & color background overlays with many options

Description

The react-slide-alerts is dependent on Material-UI @mui

Live Demo

Take a look at Live Demo

Installation

npm install react-slide-alerts

Note:

You will need to have @mui installed, in order to use this component

npm install @mui/material @emotion/react @emotion/styled

Usage Example

import SlideAlert from "react-slide-alerts";
import { useState } from "react";
export default function App() {
  const [show, setShowAlert] = useState(false);

  return (
    <div className="App">
      <SlideAlert
        open={show}
        message="Thanks for installing react-slide-alerts !"
        type="success"
        onClose={()=>setShowAlert(false)}
      />
      <button onClick={() => setShowAlert(true)}>Show</button>
    </div>
  );
}

Props

Name	Options	Default	Description
type	'success' | 'error' | 'info' | 'warning'	"info"	This indicates the type of the alert. if type is not provided by user then the default type for the alert will be info.
direction	'up' | 'down' | 'left' | 'right'	"up"	This indicates the direction of alert. alert box will animate & enter on the screen based on provided value . if any value not provided the alert will enter from up to center by default
message	"String"	null	In message props you have to pass that message you want to display on screen . it should be a valid String
open	Boolean (true/false)	false	if true the alert will render on screen . if false the alert will hide
onClose	function() / ()=>{}	null	pass any function who handle the alert state , when alert should visible & when the alert should not visible
disableBgColor	Boolean(true/false)	true	just pass the disableBgColor props to hide that background overley on screen.

You can fully customise alerts according to your needs.😊

Example

Alert Types

Alert Directions

License

Open Source Project. You can contribute.

Author

Ankit Panchal