React Status Alert

Simple React Status Alert component with Typescript support (Demo)

Project inspired by jQuery-FlashingNotifications

Installation

To install run:

npm i react-status-alert

or

yarn add react-status-alert

Basic usage with build systems (webpack, parcel etc.):

import React from 'react'
import StatusAlert, { StatusAlertService } from 'react-status-alert'
import 'react-status-alert/dist/status-alert.css'

function ExampleApp() {
  const showSuccessAlert = (): void => {
    StatusAlertService.showSuccess('Default success alert!');
  }
  
  return (
    <div>
      <StatusAlert/>
        
      <button onClick={showSuccessAlert}>Show success alert</button>
    </div>
  )
}

More complex usage:

import React from 'react'
import StatusAlert, { StatusAlertService } from 'react-status-alert'
import 'react-status-alert/dist/status-alert.css'

function ExampleApp() {
  const [alertId, setAlertId] = useState<string>('')
  
  const showSuccessAlert = (): void => {
    const alertId = StatusAlertService.showSuccess('Default success alert!');
    setAlertId(alertId)
  }
  
  const removeAlert = (): void => {
    StatusAlertService.removeAlert(this.state.alertId);
  }
  
  return (
    <div>
      <StatusAlert/>
        
      <button onClick={showSuccessAlert}>Show success alert</button> 
      <button onClick={removeAlert}>Remove alert</button>
    </div>
  )
}

The same with class component:

import React from 'react'
import StatusAlert, { StatusAlertService } from 'react-status-alert'
import 'react-status-alert/dist/status-alert.css'

export class ExampleApp extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      alertId: ''
    };
    
    this.showSuccessAlert = this.showSuccessAlert.bind(this);
    this.removeAlert = this.removeAlert.bind(this);
  }
  
  showSuccessAlert() {
    const alertId = StatusAlertService.showSuccess('Default success alert!');
    this.setState({ alertId });
  }
  
  removeAlert() {
    StatusAlertService.removeAlert(this.state.alertId);
  }
  
  render() {
    return (
      <div>
        <StatusAlert/>
        
        <button onClick={this.showSuccessAlert}>Show success alert</button> 
        <button onClick={this.removeAlert}>Remove alert</button>
      </div>
    )
  }
}

StatusAlertService API

StatusAlertService.showAlert(message: JSX.Element | string, type: AlertType, options?: AlertOptions)

StatusAlertService.showSuccess(message: JSX.Element | string, options?: AlertOptions): string

StatusAlertService.showError(message: JSX.Element | string, options?: AlertOptions): string

StatusAlertService.showInfo(message: JSX.Element | string, options?: AlertOptions): string

StatusAlertService.showWarning(message: JSX.Element | string, options?: AlertOptions): string

StatusAlertService.removeAlert(alertId: string): void

StatusAlertService.removeAllAlerts(): void

AlertType

'success' | 'error' | 'info' | 'warning'

AlertOptions

All options are optional

| Name | Type | Default | Description | |------|------|---------|-------------| | autoHide | boolean | true | Auto hide alert after timeout | | autoHideTime | number | 3500 | Auto hide timeout in ms | | withIcon | boolean | true | Show status icon | | withCloseIcon | boolean | true | Show close icon | | color | string | undefined | Text color | | backgroundColor | string | undefined | Background color | | removeAllBeforeShow | boolean | false | Remove all alerts before showing new |

Example

View demo or docs folder.