Socket
Socket
Sign inDemoInstall

react-sweetalert2

Package Overview
Dependencies
6
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-sweetalert2

A sweetalert2 wrapper to ReactJS


Version published
Maintainers
1
Weekly downloads
2,604
decreased by-9.83%

Weekly downloads

Readme

Source

Test Coverage Status

React sweetalert2

Install

$ npm i react-sweetalert2

or

$ yarn add react-sweetalert2

Usage

Functional Component

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

export default function App(){
    const [swalProps, setSwalProps] = useState({});
    return (
        <div>
            <button onClick={() => {
                setSwalProps({
                    show: true,
                    title: 'Basic Usage',
                    text: 'Hello World',
                });
            }}>
                Open
            </button>

            <SweetAlert2 {...swalProps} />
        </div>
    );
}

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

export default class App extends Component{
    constructor(){
        super();

        this.state = {
            swal: {}
        }
    }

    render() {
        return (
            <div>   
                <button onClick={() => {
                    this.setState({
                        swal: {
                            show: true,
                            title: 'Basic Usage',
                            text: 'Hello World'
                        }
                    });
                }}>Alert</button>  
                <SweetAlert2 {...this.state.swal} />
            </div>
        );
    }
}



Using withSwal function
Inject swal props into Functional Component
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',
            icon: 'success',
        });
    }
    
    return (
        <button onClick={handleClick}>
            Open
        </button>
    );
});

Inject swal props into Class Component
import React from 'react';
import { withSwal } from 'react-sweetalert2';

class ExampleComponent extends Component {
    
    function handleClick(){
        this.swal.fire({
            title: 'Example',
            text: 'Swal injected',
            icon: 'success',
        });
    }

    render(){
        return (
            <button onClick={this.handleClick.bind(this)}>
                Open
            </button>
        );
    }
}

export default withSwal(ExampleComponent);

Events
Using SweetAlert2 component
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',
            text: 'Hello World',
        }); 
    }

    return (
        <div>   
            <button onClick={handleClick}>
                Alert
            </button>  
            <SweetAlert2 {...swalProps}
                didOpen={() => {
                    // run when swal is opened...
                }}
                didClose={() => {
                    // run when swal is closed...
                }}
                onConfirm={result => {
                    // run when clieked in confirm and promise is resolved...
                }}
                onError={error => {
                    // run when promise rejected...
                }}
                onResolve={result => {
                    // run when promise is resolved...
                }}
            />
        </div>
    );
}
Using swal prop injected
import React from 'react';
import { withSwal } from 'react-sweetalert2';

export default withSwal(({ swal }, ref) => (
    <button onClick={e => {
        swal.fire({
            title: 'Example',
            text: 'Hello World',
            didOpen: () => {
                // run when swal is opened...
            },
            didClose: () => {
                // run when swal is closed...
            }
        }).then(result => {
            // when confirmed and promise resolved...
        }).catch(error => {
            // when promise rejected...
        });
    }}>
        Show Alert
    </button>  
));

Using content from HTML and React elements
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>
    );
}

Keywords

FAQs

Last updated on 14 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc