react-status-alert
    TypeScript icon, indicating that this package has built-in type declarations

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

    86

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    5.09 MB

    Total Files

    80

    Last publish

    Collaborators

    • avatar