From dbac44d2df7f2dea18578eb6897117d6c0fc3716 Mon Sep 17 00:00:00 2001 From: Limon Monte <6059356+limonte@users.noreply.github.com> Date: Tue, 17 Dec 2024 00:10:00 +0200 Subject: [PATCH] chore: add links to official examples --- README.md | 33 +++++++++++++-------------------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 597117d..494ec5c 100644 --- a/README.md +++ b/README.md @@ -2,24 +2,23 @@ Official [SweetAlert2](https://sweetalert2.github.io/) enhancer adding support for React elements as content. -[](https://github.com/sweetalert2/sweetalert2-react-content/actions) -[](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 -[](https://github.com/sweetalert2/sweetalert2-react-content/blob/main/CHANGELOG.md) -[](https://github.com/sweetalert2/sweetalert2-react-content/blob/main/src/sweetalert2-react-content.d.ts) -[](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 @@ -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)