Need private packages and team management tools?Check out npm Teams »

react-status-alert

1.0.0 • Public • Published

React Status Alert

npm version Build Status codebeat badge BCH compliance codecov

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'
 
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.

Install

npm i react-status-alert

DownloadsWeekly Downloads

9

Version

1.0.0

License

MIT

Unpacked Size

32 MB

Total Files

168

Last publish

Collaborators

  • avatar