Package Exports
- react-slide-alerts
- react-slide-alerts/SlideAlert.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-slide-alerts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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-alertsNote:
You will need to have @mui installed, in order to use this component
npm install @mui/material @emotion/react @emotion/styledUsage 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.