Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sweetalert2/sweetalert2-react-content
Official SweetAlert2 enhancer adding support for React elements as content
https://github.com/sweetalert2/sweetalert2-react-content
react sweetalert sweetalert2
Last synced: 2 days ago
JSON representation
Official SweetAlert2 enhancer adding support for React elements as content
- Host: GitHub
- URL: https://github.com/sweetalert2/sweetalert2-react-content
- Owner: sweetalert2
- License: mit
- Created: 2018-02-04T02:30:26.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-09-26T22:00:37.000Z (3 months ago)
- Last Synced: 2024-12-05T00:12:27.917Z (9 days ago)
- Topics: react, sweetalert, sweetalert2
- Language: JavaScript
- Homepage:
- Size: 1.89 MB
- Stars: 706
- Watchers: 15
- Forks: 49
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - sweetalert2-react-content - Official SweetAlert2 enhancer adding support for React elements as content (UI Components / Overlay)
- awesome-react - sweetalert2-react-content - Official SweetAlert2 enhancer adding support for React elements as content. ![](https://img.shields.io/github/stars/sweetalert2/sweetalert2-react-content.svg?style=social&label=Star) (UI Components / Dialog/Modal/Alert)
- awesome-react-components - sweetalert2-react-content - Official SweetAlert2 enhancer adding support for React elements as content (UI Components / Overlay)
- fucking-awesome-react-components - sweetalert2-react-content - Official SweetAlert2 enhancer adding support for React elements as content (UI Components / Overlay)
README
# sweetalert2-react-content
Official [SweetAlert2](https://sweetalert2.github.io/) enhancer adding support for React elements as content.
[![Build Status](https://github.com/sweetalert2/sweetalert2-react-content/workflows/build/badge.svg)](https://github.com/sweetalert2/sweetalert2-react-content/actions)
[![npm version](https://img.shields.io/npm/v/sweetalert2-react-content.svg)](https://www.npmjs.com/package/sweetalert2-react-content)[![semantic-release badge](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/sweetalert2/sweetalert2-react-content/blob/main/CHANGELOG.md)
[![typescript .d.ts included](https://img.shields.io/badge/typescript-ready-brightgreen.svg)](https://github.com/sweetalert2/sweetalert2-react-content/blob/main/src/sweetalert2-react-content.d.ts)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)The following options can be React elements:
- title
- html
- confirmButtonText
- denyButtonText
- cancelButtonText
- footer
- closeButtonHtml
- iconHtml
- loaderHtml## Installation
```bash
npm install --save sweetalert2 sweetalert2-react-content
```## Usage Example
```jsx
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'const MySwal = withReactContent(Swal)
MySwal.fire({
title:Hello World
,
didOpen: () => {
// `MySwal` is a subclass of `Swal` with all the same instance & static methods
MySwal.showLoading()
},
}).then(() => {
return MySwal.fire(Shorthand works too
)
})
```The `dist/sweetalert2-react-content.umd.js` file defines `window.sweetalert2ReactContent` in non-CJS/AMD environments.
## Limitations
SweetAlert2 renders its content outside of the `ReactTree`. In order to render React Router components (such as `Link`) you have to wrap them in the routing context which should be the same with the app.
That can be achived by using the [`HistoryRouter`](https://reactrouter.com/docs/en/v6/routers/history-router) with shared `history`. [Please refer to the official code example ↗️](https://sweetalert2.github.io/recipe-gallery/sweetalert2-react-router.html)