Have ideas to improve npm?Join in the discussion! »

    react-redux-modal-flex

    2.0.3 • Public • Published

    [DEPRECATED] REACT-REDUX-MODAL-FLEX

    NPM version NPM monthly download

    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

    Install

    npm i react-redux-modal-flex

    DownloadsWeekly Downloads

    60

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    59.2 kB

    Total Files

    39

    Last publish

    Collaborators

    • avatar