react-popup-alert

![NPM](https://www.npmjs.com/package/react-popup-alert) ![JavaScript Style Guide](https://standardjs.com)
!coverage branches badge
!coverage functions
!coverage lines badge
!coverage statements badge

``bash npm install --save react-popup-alert`

`Use example`

!open and close alert boxes

`Usage`

`jsx 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 (


      
        
        
        
        
      

              header={'Header'}
        btnText={'Close'}
        text={alert.text}
        type={alert.type}
        show={alert.show}
        onClosePress={onCloseAlert}
        pressCloseOnOutsideClick={true}
        showBorderBottom={true}
        alertStyles={{}}
        headerStyles={{}}
        textStyles={{}}
        buttonStyles={{}}
      />

)
}

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