Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chentsulin/sweetalert-react
Declarative SweetAlert in React
https://github.com/chentsulin/sweetalert-react
react react-component sweetalert
Last synced: 10 days ago
JSON representation
Declarative SweetAlert in React
- Host: GitHub
- URL: https://github.com/chentsulin/sweetalert-react
- Owner: chentsulin
- License: mit
- Created: 2015-07-12T12:25:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-07-18T07:11:52.000Z (over 3 years ago)
- Last Synced: 2024-04-08T17:18:03.012Z (7 months ago)
- Topics: react, react-component, sweetalert
- Language: JavaScript
- Homepage: http://chentsulin.github.io/sweetalert-react/
- Size: 1.55 MB
- Stars: 239
- Watchers: 6
- Forks: 62
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - sweetalert-react
README
# sweetalert-react
[![NPM version][npm-image]][npm-url]
[![Dependency Status][david_img]][david_site]
> Declarative SweetAlert in React
## Introduction
`sweetalert-react` is a wrapped `sweetalert` implementation with declarative React style component APIs. There is a `show` prop available for toggling alert component's visibility. And `onConfirm`, `onCancel`, `onClose`, `onEscapeKey`, `onOutsideClick` props allow you have a fine grained control over alert component events.
## Install
```
$ npm install sweetalert-react
```
## Usage
```js
import React, { Component } from 'react';
import SweetAlert from 'sweetalert-react';
// ...
render() {
return (
this.setState({ show: true })}>Alert
this.setState({ show: false })}
/>
);
}
```
You should import `sweetalert.css` from CDN, file, node_modules(sweetalert/dist/sweetalert.css) or wherever method to include this CSS file.
Checkout the full examples [here](./examples).
## Removed Options
- **timer**: You should use `setTimeout` and pass `show` as false.
- **closeOnConfirm**: You should pass `show` as false via `onConfirm`.
- **closeOnCancel**: You should pass `show` as false via `onCancel`.
- **allowEscapeKey**: You should pass `show` as false via `onEscapeKey`.
- **allowOutsideClick**: You should pass `show` as false via `onOutsideClick`.
All other options can be passed as props, see them in [Configuare Section in sweetalert document](http://t4t5.github.io/sweetalert/)
## FAQ
### Q: My alert didn't close when 'go back' or 'go forward' in browser
You can listen to history changes and set `show: false` when it is mounted. See the full example [here](https://github.com/chentsulin/sweetalert-react/blob/master/examples/history-change/components/App.js).
### Q: Can I use react component to render HTML as the alert body?
Sure, you can achieve this with `ReactDOMServer.renderToStaticMarkup`:
```js
import { renderToStaticMarkup } from 'react-dom/server';
)}
onConfirm={() => this.setState({ show: false })}
/>
```
See the full example [here](https://github.com/chentsulin/sweetalert-react/blob/master/examples/component-as-body/components/App.js). Thanks @ArkadyB for discovering the approach in [issue #53](https://github.com/chentsulin/sweetalert-react/issues/53).
## Relevant Projects
- [react-redux-sweetalert](https://github.com/chentsulin/react-redux-sweetalert)
## License
MIT © [C.T. Lin](https://github.com/chentsulin/sweetalert-react)
[npm-image]: https://badge.fury.io/js/sweetalert-react.svg
[npm-url]: https://npmjs.org/package/sweetalert-react
[travis-image]: https://travis-ci.org/chentsulin/sweetalert-react.svg
[travis-url]: https://travis-ci.org/chentsulin/sweetalert-react
[coveralls-image]: https://coveralls.io/repos/chentsulin/sweetalert-react/badge.svg?branch=master&service=github
[coveralls-url]: https://coveralls.io/r/chentsulin/sweetalert-react?branch=master
[david_img]: https://david-dm.org/chentsulin/sweetalert-react.svg
[david_site]: https://david-dm.org/chentsulin/sweetalert-react