|
9 | 9 |
|
10 | 10 | This package is forked from https://github.com/chentsulin/sweetalert-react and adopted for https://github.com/limonte/sweetalert2
|
11 | 11 |
|
12 |
| -`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. |
13 |
| - |
14 | 12 | ## Install
|
15 | 13 |
|
16 | 14 | ```
|
@@ -40,41 +38,13 @@ render() {
|
40 | 38 | }
|
41 | 39 | ```
|
42 | 40 |
|
43 |
| -You should import `sweetalert.css` from cdn, file, node_modules(sweetalert/dist/sweetalert.css) or wherever can find the css code. |
44 |
| - |
45 |
| -Checkout full examples [here](./examples). |
46 |
| - |
47 |
| -## Removed Options |
48 |
| - |
49 |
| -- **timer**: You should use `setTimeout` and pass `show` as false. |
50 |
| -- **closeOnConfirm**: You should pass `show` as false via `onConfirm`. |
51 |
| -- **closeOnCancel**: You should pass `show` as false via `onCancel`. |
52 |
| -- **allowEscapeKey**: You should pass `show` as false via `onEscapeKey`. |
53 |
| -- **allowOutsideClick**: You should pass `show` as false via `onOutsideClick`. |
54 |
| - |
55 |
| -All of other options can be passed as props, see them in [Configuare Section in sweetalert document](http://t4t5.github.io/sweetalert/) |
| 41 | +You should import `sweetalert2.css` from 'sweetalert2-react/src/sweetalert2.css'. |
56 | 42 |
|
57 |
| -## FAQ |
| 43 | +Checkout full examples https://github.com/chentsulin/sweetalert-react |
58 | 44 |
|
59 |
| -### Q: My alert didn't close when 'go back' or 'go forward' in browser |
| 45 | +## Tests |
60 | 46 |
|
61 |
| -You can listen history change and set `show: false` when it mounted. See full example [here](https://github.com/chentsulin/sweetalert-react/blob/master/examples/history-change/components/App.js). |
62 |
| - |
63 |
| -### Q: Can I use react component to render html for popup body? |
64 |
| - |
65 |
| -Sure, you can achieve it with `ReactDOMServer.renderToStaticMarkup`: |
66 |
| - |
67 |
| -```js |
68 |
| -import { renderToStaticMarkup } from 'react-dom/server'; |
69 |
| - |
70 |
| -<SweetAlert |
71 |
| - show={this.state.show} |
72 |
| - title="Demo" |
73 |
| - html |
74 |
| - text={renderToStaticMarkup(<HelloWorld />)} |
75 |
| - onConfirm={() => this.setState({ show: false })} |
76 |
| -/> |
77 |
| -``` |
| 47 | +Test were not updated to support sweetalert2. PRs are welcome. |
78 | 48 |
|
79 | 49 | See 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).
|
80 | 50 |
|
|
0 commit comments