sweetalert-react
Declarative SweetAlert in React
Introduction
sweetalert-react
is a wrapped sweetalert
implement with declarative React style component api. There is a show
prop on it to determinate that alert should be displayed or not, and onConfirm
, onCancel
, onClose
, onEscapeKey
and onOutsideClick
props to have more controls on alert element event.
Install
$ npm install sweetalert-react
Usage
;; // ... { return <div> <button onClick= this>Alert</button> <SweetAlert show=thisstateshow title="Demo" text="SweetAlert in React" onConfirm= this /> </div> ;}
You should import sweetalert.css
from cdn, file, node_modules(sweetalert/dist/sweetalert.css) or wherever can find the css code.
Checkout full examples here.
Removed Options
- timer: You should use
setTimeout
and passshow
as false. - closeOnConfirm: You should pass
show
as false viaonConfirm
. - closeOnCancel: You should pass
show
as false viaonCancel
. - allowEscapeKey: You should pass
show
as false viaonEscapeKey
. - allowOutsideClick: You should pass
show
as false viaonOutsideClick
.
All of other options can be passed as props, see them in Configuare Section in sweetalert document
FAQ
Q: My alert didn't close when 'go back' or 'go forward' in browser
You can listen history change and set show: false
when it mounted. See full example here.
Q: Can I use react component to render html for popup body?
Sure, you can achieve it with ReactDOMServer.renderToStaticMarkup
:
; <SweetAlert show=thisstateshow title="Demo" html text= onConfirm= this/>
See full example here. Thanks @ArkadyB for discovering the approach in issue #53.
Relevant Projects
License
MIT © C.T. Lin