The Default alert popup is boring.

That's why I built a very simple and lightweight React alert component.

It is designed to make it super easy for developers to add alerts to their applications with minimal effort.

The alert component allows developers to create alerts that display important information. The alerts are fully customizable, and can be used to convey information such as error messages, success messages, and informational messages.

One of the key features of the alert component is its ability to support different types of alerts. Developers can easily switch between different types of alerts by simply changing a single prop. The component supports error, success, and info alerts, each with its own unique styling to help users quickly identify the type of alert they are viewing.

Check out the demo here

The component is easy to implement in any React project, simple to customize, with detailed documentation provided.

Get Started:

npm install archis-react-alert

Then import the Component and Styles

import Alert from "archis-react-alert";
import "/node_modules/archis-react-alert/dist/style.css"

It is important to import the styles from the dist folder in node_modules

To set it up in your react project use the following sample code:

const [show, setShow] = useState(false);

<Alert
    show={show}
    setShow={setShow}
    time={1000}  // time before the alert closes in ms
    type={"info"} // other types: "error","warning","success"
    text={"Alert Component"} // Text to show in the alert
/>

The alert can be activated by changing the 'show' variable to true. For example:

<button onClick={()=>{setShow(true)}}> Click to show Alert <button>

Example of type="error":

Demo

The React alert component is available on npm. I invite you to give it a try, and see how it can help improve the user experience in your React applications. As always, if you have any questions or feedback, please don't hesitate to reach out to me or comment down below. I'm here to help!

I'm still actively working on this so any feedback or functionality requests would be highly appreciated!

Thanks for reading!

-Archis