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

Package Sidebar

Install

npm i react-popup-alert

Weekly Downloads

345

Version

2.0.0

License

MIT

Unpacked Size

30.8 kB

Total Files

11

Last publish

Collaborators

  • jakobinn