react-redux-sweetalert

SweetAlert with Redux-style actions, reducers API

Install

$ npm install react-redux-sweetalert

Usage

import React, { Component } from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { reducer } from 'react-redux-sweetalert';

const rootReducer = combineReducers({
  sweetalert: reducer,
});

const store = createStore(
  rootReducer,
  applyMiddleware(thunk),
);

render(
  <Provider store={store}>
    <ReduxSweetAlert />
  </Provider>
);

You should import sweetalert.css from cdn, file, node_modules(sweetalert/dist/sweetalert.css) or wherever can find the css code.

Checkout full examples here.

API

types

Payload

{
  // sweetalert option
  title: string,
  text?: string,
  type?: string,
  customClass?: string,
  showCancelButton?: boolean,
  showConfirmButton?: boolean,
  confirmButtonText?: string,
  confirmButtonColor?: string,
  cancelButtonText?: string,
  imageUrl?: string,
  imageSize?: string,
  html?: boolean,
  animation?: boolean|string,
  inputType?: string,
  inputValue?: string,
  inputPlaceholder?: string,
  showLoaderOnConfirm?: boolean,
	
  timer?: number,
  closeOnConfirm?: boolean,
  closeOnCancel?: boolean,
  allowEscapeKey?: boolean,
  allowOutsideClick?: boolean,

  // custom option
  onConfirm?: Function,
  onCancel?: Function,
  onClose?: Function,
  onEscapeKey?: Function,
  onOutsideClick?: Function,
}

actions

swal(title: string, text: ?string, type: ?string)

swal(payload: Payload)

close()

Examples

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import ReduxSweetAlert, { swal, close } from 'react-redux-sweetalert'; // eslint-disable-line


class Main extends Component {
  static propTypes = {
    close: PropTypes.func.isRequired,
    swal: PropTypes.func.isRequired,
  };
  render() {
    return (
      <div>
        <button
          onClick={() => this.props.swal({
            title: 'Demo',
            text: 'SweetAlert in React',
            onConfirm: this.props.close,
          })}
        >Alert</button>
        <ReduxSweetAlert />
      </div>
    );
  }
}


export default connect(null, {
  swal,
  close,
})(Main);

Checkout full examples here.

Use with ImmutableJS

import React, { Component } from 'react';
import { createStore, applyMiddleware } from 'redux';
import { combineReducers } from 'redux-immutable';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { immutableReducer } from 'react-redux-sweetalert';

const rootReducer = combineReducers({
  sweetalert: immutableReducer,
});

const store = createStore(
  rootReducer,
  applyMiddleware(thunk),
);

render(
  <Provider store={store}>
    <ReduxSweetAlert />
  </Provider>
);

See full example here.

License

MIT © C.T. Lin