Skip to content

Commit

Permalink
chore: add links to official examples
Browse files Browse the repository at this point in the history
  • Loading branch information
limonte committed Dec 16, 2024
1 parent dc87b52 commit f7bc174
Showing 1 changed file with 14 additions and 21 deletions.
35 changes: 14 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,28 @@

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)
- Simple example: https://sweetalert2.github.io/recipe-gallery/sweetalert2-react.html
- With React Router: https://sweetalert2.github.io/recipe-gallery/sweetalert2-react-router.html
- With react-day-picker: https://sweetalert2.github.io/recipe-gallery/input-datepicker.html

[![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
- `title`
- `html`
- `confirmButtonText`
- `denyButtonText`
- `cancelButtonText`
- `footer`
- `closeButtonHtml`
- `iconHtml`
- `loaderHtml`

## Installation

```bash
npm install --save sweetalert2 sweetalert2-react-content
npm install sweetalert2 sweetalert2-react-content
```

## Usage Example
Expand All @@ -47,9 +46,3 @@ MySwal.fire({
```

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)

0 comments on commit f7bc174

Please sign in to comment.