Quick setup (TL;DR)

Install SweetAlert2 and the React wrapper, create a wrapped instance, and render React components inside an alert. This is ideal for modals, small forms, and interactive alerts that need React state or JSX.

npm install sweetalert2 sweetalert2-react-content
# or
yarn add sweetalert2 sweetalert2-react-content

Then in your component:

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

const MySwal = withReactContent(Swal)

MySwal.fire({
  title: <strong>React content</strong>,
  html: <MyComponent />
})

Tip: If you want a compact example to paste into a CodeSandbox, check this sweetalert2-react-content tutorial.

Why use sweetalert2-react-content with React?

SweetAlert2 is widely used for polished alerts and modal dialogues. By default it accepts HTML strings; sweetalert2-react-content lets you inject real JSX components into those modals without resorting to dangerouslySetInnerHTML shenanigans. That means you can reuse components, manage local state, and hook into lifecycle events like any React UI.

Using React components inside alerts makes sense when the modal content needs interactivity—forms, inline validation, dynamic lists, or small UIs that react to user input. Instead of building a bespoke modal each time, you can combine SweetAlert2's styling and accessibility with React's component model.

Another advantage is predictable cleanup. The wrapper coordinates mounting and unmounting of React content inside SweetAlert2, reducing memory leaks and avoiding manual DOM manipulation. In short: better UX, less boilerplate, and fewer bugs—what's not to like?

Installation and initial setup

Install SweetAlert2 and the React wrapper from npm or Yarn. SweetAlert2 provides the modal engine and styling, while sweetalert2-react-content provides the glue to mount React components as SweetAlert2 content.

npm install sweetalert2 sweetalert2-react-content
# or
yarn add sweetalert2 sweetalert2-react-content

Then create a wrapped Swal instance early in your app (a module file or near the components that will use it). A simple pattern is to export a configured instance:

// src/swal.js
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'

const MySwal = withReactContent(Swal)
export default MySwal

Import that instance where needed. This keeps configuration (themes, custom classes, defaults) centralized and prevents repeated wrapping. You can also pass global defaults to SweetAlert2 if you want consistent styling across alerts.

Examples: React components in alerts

Basic JSX content

Render simple JSX inside the alert—titles, formatted text, or a tiny component. Note that you pass an element to html or didOpen depending on your pattern.

import MySwal from './swal'
import React from 'react'

function Tiny() {
  return <div><strong>Hello from React</strong></div>
}

MySwal.fire({
  title: 'JSX alert',
  html: <Tiny />
})

This renders your React component inside the SweetAlert2 modal. It keeps React handling its own state and props, and SweetAlert2 handles modal behavior (backdrop, animations, focus).

If you need lifecycle control (for example, focus an input after open), use SweetAlert2 hooks like didOpen and coordinate with refs inside your component.

Interactive alert with local state

For interactive widgets—toggles, counters, small forms—local component state is handy. The wrapper will mount your component and keep it functional while the modal is open.

function CounterAlert() {
  const [count, setCount] = React.useState(0)
  return <div>
    <p>Count: {count}</p>
    <button onClick={() => setCount(c => c + 1)}>+</button>
  </div>
}

MySwal.fire({
  title: 'Counter',
  html: <CounterAlert />
})

Use this pattern when you want client-side interaction before the modal resolves. To pass data out, either return it via SweetAlert2 buttons / preConfirm, or provide a callback prop to your component that resolves a Promise.

Advanced patterns: forms, preConfirm, hooks and state

Forms are where this integration really shines. Instead of serializing DOM inputs yourself, mount a controlled React form and use SweetAlert2's preConfirm to retrieve results and perform async validation.

MySwal.fire({
  title: 'Login',
  html: <LoginForm />,
  showCancelButton: true,
  preConfirm: () => {
    // Return a value or a promise; SweetAlert2 will wait
    const el = document.querySelector('form#swal-login')
    return { username: el.username.value }
  }
})

If you prefer to avoid DOM queries, pass a resolve callback down into your React form via props. The form can call that callback with its data when the user submits, and the parent can then call MySwal.close() or reject accordingly.

For async validation (e.g., checking a username), return a promise from preConfirm. SweetAlert2 displays a loading state while the promise resolves, making it friendly for network interactions.

Also consider lifecycle hooks: didOpen and willClose pair well with effects inside your component if you need to focus elements, start timers, or clean up event listeners.

Best practices, accessibility and caveats

Keep modals small and focused: sweetalert2-react-content is great for compact components, but for complex nested UIs build a dedicated modal wrapper or use a full modal library integrated with React Router or context. The wrapper is best for alerts, confirmations, and tiny interactive UIs—think "micro-modals."

Pay attention to accessibility: SweetAlert2 handles focus trapping and ARIA attributes, but your React content should include semantic form controls, labels, and keyboard operability. Test keyboard navigation and screen reader behavior for any custom interactive alert.

A common caveat is lifecycle mismatch: never assume the modal persists forever. Clean up timers and subscriptions inside useEffect cleanup so unmounted components won't leak. Also, prefer React refs or callback props over querying the DOM when possible.

Finally, if server-side rendering is part of your stack, conditionally load SweetAlert2 only in the browser (dynamic import) to avoid server-side DOM assumptions.

Further reading and references

For a concise walk-through that demonstrates mounting JSX inside SweetAlert2, see this sweetalert2-react-content tutorial on Dev.to.

Official references: SweetAlert2 docs (sweetalert2.github.io) and the wrapper's npm page (sweetalert2-react-content on npm).

FAQ

1. How do I install and get started with sweetalert2-react-content?

Install both SweetAlert2 and the React wrapper via npm or Yarn, wrap the Swal instance with withReactContent, then use the wrapped instance to fire alerts with JSX in the html property. Example: const MySwal = withReactContent(Swal); MySwal.fire({ html: <MyComponent/> }).

2. Can I use controlled React forms inside a SweetAlert2 modal?

Yes. Mount a controlled form component as the alert content and either extract values via preConfirm (DOM query or a callback) or pass a resolve callback into the component so it returns form data. For async validation, return a Promise from preConfirm and SweetAlert2 will wait.

3. How do I manage state and cleanup for interactive alerts?

Manage local state with React hooks inside your component and clean up subscriptions/timers in useEffect cleanup. Use SweetAlert2 lifecycle hooks (didOpen, willClose) to coordinate focus and external effects. Prefer refs or callback props to avoid fragile DOM queries.

Suggested micro-markup (FAQ schema)

Include this JSON-LD in your page to improve chances for rich results (replace the Q/A strings if you customize):

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How do I install and get started with sweetalert2-react-content?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Install sweetalert2 and sweetalert2-react-content, wrap Swal with withReactContent, and pass JSX to the html property of MySwal.fire."
      }
    },
    {
      "@type": "Question",
      "name": "Can I use controlled React forms inside a SweetAlert2 modal?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes. Mount a controlled form as alert content and return values via preConfirm or a callback. Use Promises for async validation."
      }
    },
    {
      "@type": "Question",
      "name": "How do I manage state and cleanup for interactive alerts?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Use useEffect cleanup for timers/subscriptions, coordinate with didOpen/willClose hooks, and prefer refs or props over DOM queries."
      }
    }
  ]
}

Wrap-up

For compact, interactive modals that still behave like React components, sweetalert2-react-content is a pragmatic choice. It lets you keep the benefits of SweetAlert2 styling and behavior while using React for content and interactivity. Try a small controlled form or widget first, then scale patterns as needed.

If you want a working demo to copy, here's a helpful sweetalert2-react-content tutorial on Dev.to that walks through mounting components step by step.