React sweetalert2

Install

$ npm i react-sweetalert2

or

$ yarn add react-sweetalert2

Usage

Functional Component

1
2import React, { useState } from 'react';
3import SweetAlert2 from 'react-sweetalert2';
4
5export default function App(){
6    const [swalProps, setSwalProps] = useState({});
7    return (
8        <div>
9            <button onClick={() => {
10                setSwalProps({
11                    show: true,
12                    title: 'Basic Usage',
13                    text: 'Hello World',
14                });
15            }}>
16                Open
17            </button>
18
19            <SweetAlert2 {...swalProps} />
20        </div>
21    );
22}
23

Class Component

1import React, { Component } from 'react';
2import SweetAlert2 from 'react-sweetalert2';
3
4export default class App extends Component{
5    constructor(){
6        super();
7
8        this.state = {
9            swal: {}
10        }
11    }
12
13    render() {
14        return (
15            <div>   
16                <button onClick={() => {
17                    this.setState({
18                        swal: {
19                            show: true,
20                            title: 'Basic Usage',
21                            text: 'Hello World'
22                        }
23                    });
24                }}>Alert</button>  
25                <SweetAlert2 {...this.state.swal} />
26            </div>
27        );
28    }
29}
30
31
32

Using withSwal function

Inject swal props into Functional Component

1import React from 'react';
2import { withSwal } from 'react-sweetalert2';
3
4export default withSwal((props, ref) => {
5    const { swal, ...rest } = props;
6
7    function handleClick(){
8        swal.fire({
9            title: 'Example',
10            text: 'Swal injected',
11            icon: 'success',
12        });
13    }
14    
15    return (
16        <button onClick={handleClick}>
17            Open
18        </button>
19    );
20});
21

Inject swal props into Class Component

1import React from 'react';
2import { withSwal } from 'react-sweetalert2';
3
4class ExampleComponent extends Component {
5    
6    function handleClick(){
7        this.swal.fire({
8            title: 'Example',
9            text: 'Swal injected',
10            icon: 'success',
11        });
12    }
13
14    render(){
15        return (
16            <button onClick={this.handleClick.bind(this)}>
17                Open
18            </button>
19        );
20    }
21}
22
23export default withSwal(ExampleComponent);
24

Events

Using SweetAlert2 component

1import React, { useState } from 'react';
2import SweetAlert2 from 'react-sweetalert2';
3
4export default function App(){
5    const [swalProps, setSwalProps] = useState({});
6
7    function handleClick(){
8        setSwalProps({
9            show: true,
10            title: 'Example',
11            text: 'Hello World',
12        }); 
13    }
14
15    return (
16        <div>   
17            <button onClick={handleClick}>
18                Alert
19            </button>  
20            <SweetAlert2 {...swalProps}
21                didOpen={() => {
22                    // run when swal is opened...
23                }}
24                didClose={() => {
25                    // run when swal is closed...
26                }}
27                onConfirm={result => {
28                    // run when clieked in confirm and promise is resolved...
29                }}
30                onError={error => {
31                    // run when promise rejected...
32                }}
33                onResolve={result => {
34                    // run when promise is resolved...
35                }}
36            />
37        </div>
38    );
39}

Using swal prop injected

1import React from 'react';
2import { withSwal } from 'react-sweetalert2';
3
4export default withSwal(({ swal }, ref) => (
5    <button onClick={e => {
6        swal.fire({
7            title: 'Example',
8            text: 'Hello World',
9            didOpen: () => {
10                // run when swal is opened...
11            },
12            didClose: () => {
13                // run when swal is closed...
14            }
15        }).then(result => {
16            // when confirmed and promise resolved...
17        }).catch(error => {
18            // when promise rejected...
19        });
20    }}>
21        Show Alert
22    </button>  
23));
24

Using content from HTML and React elements

1import React, { useState } from 'react';
2import SweetAlert2 from 'react-sweetalert2';
3
4export default function App(){
5    const [swalProps, setSwalProps] = useState({});
6
7    function handleClick(){
8        setSwalProps({
9            show: true,
10            title: 'Example'
11        }); 
12    }
13
14    return (
15        <div>   
16            <button onClick={handleClick}>
17                Alert
18            </button>  
19            <SweetAlert2 {...swalProps}>
20                <h1>
21                    Hello World!
22                </h1>
23            </SweetAlert2>
24        </div>
25    );
26}
27