{"id":13493966,"url":"https://github.com/chentsulin/sweetalert-react","last_synced_at":"2025-04-04T17:09:01.007Z","repository":{"id":34914050,"uuid":"38961122","full_name":"chentsulin/sweetalert-react","owner":"chentsulin","description":"Declarative SweetAlert in React","archived":false,"fork":false,"pushed_at":"2021-07-18T07:11:52.000Z","size":1621,"stargazers_count":239,"open_issues_count":20,"forks_count":60,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-30T08:18:42.254Z","etag":null,"topics":["react","react-component","sweetalert"],"latest_commit_sha":null,"homepage":"http://chentsulin.github.io/sweetalert-react/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"azerothcore/mod-congrats-on-level","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chentsulin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-12T12:25:55.000Z","updated_at":"2024-05-31T18:54:56.000Z","dependencies_parsed_at":"2022-09-01T05:54:10.173Z","dependency_job_id":null,"html_url":"https://github.com/chentsulin/sweetalert-react","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fsweetalert-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fsweetalert-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fsweetalert-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fsweetalert-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chentsulin","download_url":"https://codeload.github.com/chentsulin/sweetalert-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217183,"owners_count":20903009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-component","sweetalert"],"created_at":"2024-07-31T19:01:20.437Z","updated_at":"2025-04-04T17:09:00.991Z","avatar_url":"https://github.com/chentsulin.png","language":"JavaScript","readme":"# sweetalert-react\n\n[![NPM version][npm-image]][npm-url]\n[![Dependency Status][david_img]][david_site]\n\n\u003e Declarative SweetAlert in React\n\n## Introduction\n\n`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.\n\n## Install\n\n```\n$ npm install sweetalert-react\n```\n\n## Usage\n\n```js\nimport React, { Component } from 'react';\nimport SweetAlert from 'sweetalert-react';\n\n// ...\n\nrender() {\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e this.setState({ show: true })}\u003eAlert\u003c/button\u003e\n      \u003cSweetAlert\n        show={this.state.show}\n        title=\"Demo\"\n        text=\"SweetAlert in React\"\n        onConfirm={() =\u003e this.setState({ show: false })}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nYou should import `sweetalert.css` from CDN, file, node_modules(sweetalert/dist/sweetalert.css) or wherever method to include this CSS file.\n\nCheckout the full examples [here](./examples).\n\n## Removed Options\n\n- **timer**: You should use `setTimeout` and pass `show` as false.\n- **closeOnConfirm**: You should pass `show` as false via `onConfirm`.\n- **closeOnCancel**: You should pass `show` as false via `onCancel`.\n- **allowEscapeKey**: You should pass `show` as false via `onEscapeKey`.\n- **allowOutsideClick**: You should pass `show` as false via `onOutsideClick`.\n\nAll other options can be passed as props, see them in [Configuare Section in sweetalert document](http://t4t5.github.io/sweetalert/)\n\n## FAQ\n\n### Q: My alert didn't close when 'go back' or 'go forward' in browser\n\nYou 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).\n\n### Q: Can I use react component to render HTML as the alert body?\n\nSure, you can achieve this with `ReactDOMServer.renderToStaticMarkup`:\n\n```js\nimport { renderToStaticMarkup } from 'react-dom/server';\n\n\u003cSweetAlert\n  show={this.state.show}\n  title=\"Demo\"\n  html\n  text={renderToStaticMarkup(\u003cHelloWorld /\u003e)}\n  onConfirm={() =\u003e this.setState({ show: false })}\n/\u003e\n```\n\nSee 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).\n\n## Relevant Projects\n\n- [react-redux-sweetalert](https://github.com/chentsulin/react-redux-sweetalert)\n\n## License\n\nMIT © [C.T. Lin](https://github.com/chentsulin/sweetalert-react)\n\n[npm-image]: https://badge.fury.io/js/sweetalert-react.svg\n[npm-url]: https://npmjs.org/package/sweetalert-react\n[travis-image]: https://travis-ci.org/chentsulin/sweetalert-react.svg\n[travis-url]: https://travis-ci.org/chentsulin/sweetalert-react\n[coveralls-image]: https://coveralls.io/repos/chentsulin/sweetalert-react/badge.svg?branch=master\u0026service=github\n[coveralls-url]: https://coveralls.io/r/chentsulin/sweetalert-react?branch=master\n[david_img]: https://david-dm.org/chentsulin/sweetalert-react.svg\n[david_site]: https://david-dm.org/chentsulin/sweetalert-react\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchentsulin%2Fsweetalert-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchentsulin%2Fsweetalert-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchentsulin%2Fsweetalert-react/lists"}