https://github.com/kessejones/react-sweetalert2
SweetAlert2 implementation for ReactJS
https://github.com/kessejones/react-sweetalert2
front-end javascript react reactjs sweetalert2 web
Last synced: about 1 month ago
JSON representation
SweetAlert2 implementation for ReactJS
- Host: GitHub
- URL: https://github.com/kessejones/react-sweetalert2
- Owner: kessejones
- License: apache-2.0
- Created: 2018-12-13T23:29:42.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-17T03:56:29.000Z (about 2 months ago)
- Last Synced: 2025-04-17T17:57:14.804Z (about 2 months ago)
- Topics: front-end, javascript, react, reactjs, sweetalert2, web
- Language: TypeScript
- Homepage: https://kessejones.github.io/react-sweetalert2/
- Size: 567 KB
- Stars: 14
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/kessejones/react-sweetalert2/actions/workflows/test.yml)
[](https://coveralls.io/github/kessejones/react-sweetalert2?branch=master)
# 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 (
{
setSwalProps({
show: true,
title: 'Basic Usage',
text: 'Hello World',
});
}}>
Open
);
}
```
#### 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 (
{
this.setState({
swal: {
show: true,
title: 'Basic Usage',
text: 'Hello World'
}
});
}}>Alert
);
}
}
```
#### 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 (
Alert
{
// 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...
}}
/>
);
}
```
##### 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 (
Alert
Hello World!
);
}
```