react-redux-modal-flex

[DEPRECATED] REACT-REDUX-MODAL-FLEX

Make easy a modal/popup with Redux.

⚠️ This will work only with React 16.3+ ⚠️

If you're looking for a version for React 16.2 (for individual pages) use 1.x branch branch.

Demo

https://react-redux-modal-flex.netlify.com

Features

• Responsive
• Easy custom animation effect by Animate.css

Installation

To install the stable version you can use:

$ yarn add react-redux-modal-flex

Example

Step 1:

rootReducer.js

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:

App.js

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:

Any Container you want to use

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

• initState: you can overwrite default initial state

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"),
  },
};

• API

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

• <Modal /> is component, using in our App.js
• reducer using in our rootReducer.js you can custom default initial state

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

• toggleModal and modifyOkModal is action

Usage

• Open Modal by action toggleModal(options)
  • options: is object and look like the initState above
  • Example:

...
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>
  );
}
...

• Close Modal toggleModal(false) or any value excepted object
• Modify button OK: modifyOkModal(options) usage like toggleModal
  • Example:

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

• Hide Header if the title is null
• Hide Cancel button if the textCancel is null
• Hide Ok button if ok: {text: null}
• Hide Footer if the Cancel and Ok are hidden

License

MIT