react-redux-simple-modal

    0.2.5 • Public • Published

    react-redux-simple-modal Build Status npm version

    A simple modal switcher for React.

    A super simple set of actions, a reducer and a component to display modals.

    Install

    npm install --save react-redux-simple-modal

    Example

    import React from 'react'
    import { connect } from 'react-redux'
    import { ModalSwitcher, openModal } from 'react-redux-simple-modal'
     
    import ExampleModal from './ExampleModal'
    import OtherExampleModal from './OtherExampleModal'
    import { EXAMPLE_MODAL, OTHER_EXAMPLE_MODAL } from './constants'
     
    const ExamplePage = ({ openModal }) => (
      <div className="example-page">
        <ModalSwitcher
          modals={{
            [EXAMPLE_MODAL]: ExampleModal,
            [OTHER_EXAMPLE_MODAL]: OtherExampleModal
          }}
        />
        <button onClick={openModal.bind(null, EXAMPLE_MODAL)}>Open Example Modal</button>
        <button onClick={openModal.bind(null, OTHER_EXAMPLE_MODAL)}>Open Other Example Modal</button>
      </div>
    )
     
    export default connect(
      null,
      { openModal }
    )(ExamplePage)

    API

    Reducer

    Your root reducer should use the reducer exported by this module against its modals key.

    Actions

    openModal(modalType, modalParams)

    This opens the SimpleModalComponent referred to by modalType.

    modalType is a constant that references a component passed into ModalSwitcher's modals prop.

    modalParams are a set of props that you wish to be set on the SimpleModalComponent.

    closeModal()

    This removes the current modal.

    It has no arguments.

    Component

    <ModalSwitcher modals={modals} />

    This renders a SimpleModalComponent iff a modalType that matches a key within modals has been set within the modals store.

    <SimpleModalComponent modalType={modalType} closeModal={closeModal} modalParams={modalParams} />

    SimpleModalComponent describes the contract that your modals should follow.

    They should use the closeModal prop that was passed in to close themselves.

    They will receive the extra props passed in as second argument of showModal(..., modalParams) as a modalParams prop.

    Install

    npm i react-redux-simple-modal

    DownloadsWeekly Downloads

    9

    Version

    0.2.5

    License

    Unlicense

    Last publish

    Collaborators

    • sebinsua