simple-react-alert

simple-react-alert is an easy to use alert system for react.

https://www.npmjs.com/package/simple-react-alert

To install run

npm i simple-react-alert

To use this package, import the Alert component to the top level of your application, then import and call the openAlert() function from anywhere in the app. For instance, you could trigger the alert after an api call returns, after submitting a form, or when clicking a button.

The openAlert function takes three different parameters, but only message is required:

  openAlert({ message, type, duration })

The message parameter is the string of text to be rendered in the alert box, shown to your users, this needs to be added for each function call.

The default duration of an alert is 2500ms but can be overwritten with each different alert, allowing you to show alerts with lengthier messages for longer, or short ones for less. This parameter is optional and takes a number value. E.g 3000

The types of alert you can use are listed below, the default is 'info' but should normally be specified for each function call. The type changes the colour and the icon of the alert box. Default colours match the style of the alert box; red for danger, green for success, orange for warning and blue for information.

Types

• type: 'success'
• type: 'warning'
• type: 'info'
• type: 'danger'

openAlert({ message: 'Your changes have succesfully saved', type: 'success' });

Change colour

You can also update the colours for the different types of alert to match your own color scheme by adding your own custom choice to the top level component.

You can edit the colours by using the following props:

• successColor
• warningColor
• infoColor
• dangerColor

<Alert successColor: '#ffffff' />

This property accepts hex colors, and will default back to the original if presented with an incorrect value type.

Further custom styles

For more css customisations you can target these different elements in your own css.

• .Alert-container (The div element which functions as the alert box)
• .Alert-message-container (the span element which wraps the icon and message)
• .Alert-text (the p element which displays the message)