sweetalert2-react-content

Official sweetalert2 enhancer adding support for React elements as content.

Usage no npm install needed!

<script type="module">
  import sweetalert2ReactContent from 'https://cdn.skypack.dev/sweetalert2-react-content';
</script>

README

sweetalert2-react-content

Official SweetAlert2 enhancer adding support for React elements as content.

Build Status Coverage Status npm version

semantic-release badge typescript .d.ts included License: MIT

The following options can be React elements:

  • title
  • html
  • confirmButtonText
  • denyButtonText
  • cancelButtonText
  • footer
  • closeButtonHtml
  • iconHtml
  • loaderHtml

Installation

npm install --save sweetalert2 sweetalert2-react-content

Usage Example

import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'

const MySwal = withReactContent(Swal)

MySwal.fire({
  title: <p>Hello World</p>,
  footer: 'Copyright 2018',
  didOpen: () => {
    // `MySwal` is a subclass of `Swal`
    //   with all the same instance & static methods
    MySwal.clickConfirm()
  }
}).then(() => {
  return MySwal.fire(<p>Shorthand works too</p>)
})

The dist/sweetalert2-react-content.umd.js file defines window.sweetalert2ReactContent in non-CJS/AMD environments.