React sweetalert2

Install

``
$ npm i react-sweetalert2
`
or
`
$ yarn add react-sweetalert2
`




Usage

#### Functional Component

`javascript

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

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


);
}

`

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

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

this.state = {
swal: {}
}
}

render() {
return (


);
}
}

`
#### Using withSwal function


##### Inject swal props into Functional Component

`javascript
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 (

Open

);
});

`

##### Inject swal props into Class Component

`javascript
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 (

Open

);
}
}

export default withSwal(ExampleComponent);

`

#### Events

##### Using SweetAlert2 component

`javascript
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 (



);
}
`

##### Using swal prop injected


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

export default withSwal(({ swal }, ref) => (
{
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

));

`

##### Using content from HTML and React elements

`javascript
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 (


);
}

``