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

    2.0.0 • Public • Published

    react-popup-alert

    NPM JavaScript Style Guide coverage branches badge coverage functions coverage lines badge coverage statements badge

    npm install --save react-popup-alert

    Use example

    open and close alert boxes

    Usage

    import React from 'react'
    
    import Alert from 'react-popup-alert'
    
    const App = () => {
      const [alert, setAlert] = React.useState({
        type: 'error',
        text: 'This is a alert message',
        show: false
      })
    
      function onCloseAlert() {
        setAlert({
          type: '',
          text: '',
          show: false
        })
      }
    
      function onShowAlert(type) {
        setAlert({
          type: type,
          text: 'Demo alert',
          show: true
        })
      }
    
      return (
        <div>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 50 }}>
            <button onClick={() => onCloseAlert()}>Hide alert</button>
            <button onClick={() => onShowAlert('success')}>
              Show success alert
            </button>
            <button onClick={() => onShowAlert('error')}>Show error alert</button>
            <button onClick={() => onShowAlert('warning')}>
              Show warning alert
            </button>
          </div>
          <Alert
            header={'Header'}
            btnText={'Close'}
            text={alert.text}
            type={alert.type}
            show={alert.show}
            onClosePress={onCloseAlert}
            pressCloseOnOutsideClick={true}
            showBorderBottom={true}
            alertStyles={{}}
            headerStyles={{}}
            textStyles={{}}
            buttonStyles={{}}
          />
        </div>
      )
    }
    
    export default App

    Parameters

    Prop Type Description Default
    show boolean Show / Hide alert false
    header string Header text Warning
    text string Alert text
    btnText string Text on the button Close
    showBorderBottom boolean Show colored line at the bottom of the alert true
    type success | warning | error Show different types of alert
    color string (hex color) Hex color of the alert (#22ffaa for example)
    onClosePress function Function that runs when alert closes
    pressCloseOnOutsideClick boolean Trigger onClosePress function when user clicks outside of the alert true
    alertStyles object Object of styles that affect the popup.
    headerStyles object Object of styles that affect the header.
    textStyles object Object of styles that affect the text of the popup.
    buttonStyles object Object of styles that affect the popup button.

    License

    MIT © jakobinn

    Install

    npm i react-popup-alert

    DownloadsWeekly Downloads

    330

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    30.8 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar