https://github.com/sebinsua/react-redux-simple-modal

🔱 A simple modal switcher for React.
https://github.com/sebinsua/react-redux-simple-modal

modals react reducer switch

Last synced: about 1 year ago
JSON representation

🔱 A simple modal switcher for React.

• Host: GitHub
• URL: https://github.com/sebinsua/react-redux-simple-modal
• Owner: sebinsua
• License: unlicense
• Created: 2016-11-15T21:23:22.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-06-26T10:04:12.000Z (about 9 years ago)
• Last Synced: 2024-11-22T00:30:25.549Z (over 1 year ago)
• Topics: modals, react, reducer, switch
• Language: JavaScript
• Homepage:
• Size: 174 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# `react-redux-simple-modal` [![Build Status](https://travis-ci.org/sebinsua/react-redux-simple-modal.png)](https://travis-ci.org/sebinsua/react-redux-simple-modal) [![npm version](https://badge.fury.io/js/react-redux-simple-modal.svg)](https://npmjs.org/package/react-redux-simple-modal)

> A simple modal switcher for React.

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

## Install

```sh

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

```

## Example

```js

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 }) => (

  


    

    Open Example Modal

    Open Other Example Modal

  

)


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

#### ``

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

###### ``

`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.