react-sweetalert2-redux

Install

$ npm install react-sweetalert2-redux

Usage

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { Provider } from 'react-redux';
4import { createStore, combineReducers, applyMiddleware } from 'redux';
5import thunk from 'redux-thunk';
6
7import ReduxSweetAlert2, { reducer } from 'react-sweetalert2-redux';
8
9const rootReducers = combineReducers({
10    sweetalert2: reducer
11});
12
13const store = createStore(
14    rootReducers, 
15    applyMiddleware(thunk)
16);
17
18const App = () => (
19    <Provider store={store}>
20        <ReduxSweetAlert2 />
21    </Provider>
22);
23
24ReactDOM.render(<App/>, document.getElementById('root'));

API

Payload

1{
2    show: bool.isRequired,
3    title?: string,
4    titleText?: string,
5    html?: string,
6    text?: string,
7    type?: enum(['warning', 'error', 'success', 'info', 'input']),
8    footer?: string,
9    backdrop?: boolean,
10    toast?: boolean,
11    target?: string,
12    input?: enum(['text', 'email', 'password', 'number', 'tel', 'range', 'textarea', 'select', 'radio', 'checkbox', 'file', 'url']),
13    width?: number,
14    padding?: number,
15    background?: string,
16    position?: enum(['center', 'top', 'top-start', 'top-end', 'center-start', 'center-end', 'bottom', 'bottom-start', 'bottom-end']),
17    grow?: enum(['row', 'column', 'fullscreen', false]),
18    customClass?: string,
19    timer?: number,
20    animation?: boolean,
21    heightAuto?: boolean,
22    allowOutsideClick?: boolean,
23    allowEscapeKey?: boolean,
24    allowEnterKey?: boolean,
25    stopKeydownPropagation?: boolean,
26    keydownListenerCapture?: boolean,
27    showConfirmButton?: boolean,
28    showCancelButton?: boolean,
29    confirmButtonText?: string,
30    cancelButtonText?: string,
31    confirmButtonColor?: string,
32    cancelButtonColor?: string,
33    confirmButtonClass?: string,
34    cancelButtonClass?: string,
35    confirmButtonAriaLabel?: string,
36    cancelButtonAriaLabel?: string,
37    buttonsStyling?: boolean,
38    reverseButtons?: boolean,
39    focusConfirm?: boolean,
40    focusCancel?: boolean,
41    showCloseButton?: boolean,
42    closeButtonAriaLabel?: string,
43    showLoaderOnConfirm?: boolean,
44    preConfirm?: Function,
45    imageUrl?: string,
46    imageWidth?: number,
47    imageHeight?: number,
48    imageAlt?: string,
49    imageClass?: string,
50    inputPlaceholder?: string,
51    inputValue?: string,
52    inputOptions?: Object,
53    inputAutoTrim?: boolean,
54    inputAttributes?: Object,
55    inputValidator?: Function,
56    validationMesage?: string,
57    inputClass?: string,
58    progressSteps?: [],
59    currentProgressStep?: string,
60    progressStepsDistance?: string,
61    onBeforeOpen?: Function,
62    onOpen?: Function,
63    onClose?: Function,
64    onAfterClose?: Function,
65    useRejections?: boolean,
66    expectRejections?: boolean,
67    onConfirm?: Function,
68    showLoading?: boolean
69}

Actions

1openAlert(payload: Payload);

1closeAlert();

Examples

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { connect } from 'react-redux';
4import { createStore, combineReducers, applyMiddleware } from 'redux';
5import ReduxSweetAlert2, { openAlert } from 'react-sweetalert2-redux';
6
7class App extends Component {
8    render(){
9        return (
10            <div>
11                <button onClick={() => {
12                    this.props.openAlert({
13                        title: 'Hello World'
14                    });
15                }}>
16                    Open Alert
17                </button>
18                <ReduxSweetAlert2 />
19            </div>
20        );
21    }
22}
23
24export default connect(null, { openAlert })(App);