Possible to pass component to sweet alert?

[RayHughes]

Is it possible to pass a component to sweet alert. I have tried to no avail.

[kessejones]

This is not yet supported. But I plan to release a new version soon, and I can do this functionality.

[RayHughes]

Great thanks!

[RayHughes]

I saw you closed this. Was this added?

[kessejones]

Wouldn't that be what you need?

import React from 'react';
import { withSwal } from 'react-sweetalert2';

export default withSwal((props, ref) => {
    const { swal, ...rest } = props;

    function handleClick(){
        swal.fire({
            title: 'Example',
            text: 'Swal injected',
            type: 'success',
        });
    }

    return (
        <button onClick={handleClick}>
            Open
        </button>
    );
});

[RayHughes]

So I was trying to get SWAL to render a component in the html area. The reason for this is because I need to be able to copy a value in the alert to a users clipboard.

<SweetAlert2 Component={component}/>

[kessejones]

Hmm, I understand what you do but I don't think it's possible. The SWAL html area expects to receive a string, I believe it is not possible to render a component inside it.

[pbldmngz]

Since 2 years have passed, did this feature get included?

[rohit-9823]

its 2022 is this feature included yet??

[kessejones]

Yes, it is possible to pass a component to swal, but it must not share the state component with the parent component. It can be used like this:

import React, { useState } from 'react';
import SweetAlert2 from 'react-sweetalert2';

export default function App(){
    const [swalProps, setSwalProps] = useState({});

    function handleClick(){
        setSwalProps({
            show: true,
            title: 'Example'
        }); 
    }

    return (
        <div>   
            <button onClick={handleClick}>
                Alert
            </button>  
            <SweetAlert2 {...swalProps}>
                <h1>
                    Hello World!
                </h1>
            </SweetAlert2>
        </div>
    );
}