react-popup-alert
npm install --save react-popup-alert
Use example
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