react-redux-sweetalert2

React and Redux sweetalert2 wrapper

Basic usage

1import React from 'react';
2import { render } from 'react-dom';
3import { Provider } from 'react-redux';
4import { createStore, combineReducers } from 'redux';
5
6import App from './App';
7import SweetAlert, { reducers as swalReducers } from '../src';
8
9const store = createStore(combineReducers({
10	swal: swalReducers
11}));
12
13render(
14	<Provider store={store}>
15		<div>
16			<App />
17			<SweetAlert />
18		</div>	
19	</Provider>
20	, document.getElementById("app")
21);

App.js

1import React, { Component } from 'react';
2import { connect } from 'react-redux';
3
4import SweetAlert, { swal } from '../src';
5
6class App extends Component {
7	handleShowButtonClick() {
8		let swalOptions = {
9			title: 'Title',
10			text: 'Description',
11			type: 'success'
12		};
13		this.props.showAlert(swalOptions);
14	}
15
16	handleHideButtonClick() {
17		this.props.hideAlert();
18	}
19
20	render() {
21		return (
22			<div>
23				<h1>Hello!</h1>
24				<button onClick={() => this.handleShowButtonClick() } >Show Alert!</button>
25				<button onClick={() => this.handleHideButtonClick() } >Hide Alert!</button>
26			</div>
27		);
28	}
29}
30
31function mapStateToProps(state) {
32	return state;
33}
34
35export default connect(mapStateToProps, {...swal})(App);

TODO

• Publish on NPM