Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
react-sweetalert2
Advanced tools
A sweetalert2 wrapper to ReactJS
Weekly downloads
Readme
$ npm i react-sweetalert2
or
$ yarn add react-sweetalert2
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>
);
}
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>
);
}
}
withSwal
functionswal
props into Functional Componentimport 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>
);
});
swal
props into Class Componentimport 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);
SweetAlert2
componentimport 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>
);
}
swal
prop injectedimport 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>
));
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>
);
}
FAQs
A sweetalert2 wrapper to ReactJS
The npm package react-sweetalert2 receives a total of 2,242 weekly downloads. As such, react-sweetalert2 popularity was classified as popular.
We found that react-sweetalert2 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.