[DEPRECATED] REACT-REDUX-MODAL-FLEX

Demo

Features

Installation

$ yarn add react-redux-modal-flex

Example

Step 1:

import { combineReducers } from "redux";
import { reducer as modal } from "react-redux-modal-flex";
import todos from "./todos";
export default combineReducers({
 todos,
 modal: modal({
 classContent: "modal-content",
 animation: "zoomIn",
 duration: 200,
 mask: true,
 /* initial state, see API reference */
 }),
});

Step 2:

import Modal from "react-redux-modal-flex";
class App extends React.Component {
 render() {
 return (
 <Router>
 <div className="App">
 <Switch>
 <Route path="/" exact component={Home} />
 <Route path="/auth" component={Auth} />
 </Switch>
 <Modal />
 </div>
 </Router>
 );
 }
}

Step 3:

import { connect } from "react-redux";
import { actions as ModalActions } from "react-redux-modal-flex";
class LoginModal extends React.Component {
 render() {
 return (
 <form>
 <div>
 <label>Username</label>
 <input type="text" name="username" />
 </div>
 <div>
 <label>Password</label>
 <input type="password" name="password" />
 </div>
 </form>
 );
 }
}
class Auth extends React.Component {
 render() {
 return (
 <div>
 <h3>Auth</h3>
 <button
 onClick={() =>
 this.props.toggleModal({
 component: LoginModal,
 ok: {
 text: "Login",
 action: () => alert("submit form"),
 },
 })
 }
 >
 Open modal login
 </button>
 </div>
 );
 }
}
export default connect(null, { toggleModal: ModalActions.toggleModal })(Auth);

API

const initState = {
 classContent: "modal-content",
 animation: "zoomIn",
 duration: 300,
 mask: true,
 closeByMask: true,
 component: ModalDefault,
 title: "This is a title",
 closeBtn: true,
 textCancel: "Cancel",
 ok: {
 text: "OK",
 classOk: "modal-btn-ok",
 disabled: false,
 action: () => console.log("OK clicked"),
 },
};

import Modal, {
 reducer as modal,
 actions as ModalActions,
} from "react-redux-modal-flex";
const { toggleModal, modifyOkModal } = ModalActions;

export default combineReducers({
 todos,
 modal: modal({
 textCancel: "Close",
 title: "My default title",
 }),
});

Usage

...
render() {
 return (
 <button onClick={() => this.props.toggleModal({
 textCancel: 'Hide',
 component: () => <div>content modal</div>,
 title: 'My title',
 ok: {
 text: 'Login',
 action: () => alert('click OK')
 }
 })}>Click me</button>
 );
}
...

onClick={() => this.props.modifyOkModal({
 text: 'Sign up',
 disabled: true
})}

License