react-redux-modal-provider controls the state of your React modal components using Redux

Overview

React Redux Modal Provider

react-redux-modal-provider controls the state of your React modal components using Redux.

Installation

npm i --save react-redux-modal-provider

Usage

1. Add to your root component.

import ModalProvider from 'react-redux-modal-provider';

export default render(
  <Provider store={store}>
    <div>
      <App />
      <ModalProvider />
    </div>
  </Provider>,
  document.getElementById('app')
);

2. Plug in Modal Provider reducer.

import { reducer as modalProvider } from 'react-redux-modal-provider';

export default combineReducers({
  modalProvider,
});

3. Add modal creation code.

showModal(MyModal, { message: 'Hello' })}> Present modal
);">
// app.jsx
import { showModal } from 'react-redux-modal-provider';
import MyModal from './myModal';

export default (props) => (
  <div>
    <p>
      Hello world
    </p>
    <button
      type="button"
      onClick={() => showModal(MyModal, { message: 'Hello' })}>
      Present modal
    </button>
  </div>
);

4. Handle modal closing.

// myModal.jsx
import { Modal } from 'react-bootstrap';

export default (props) => (
  <Modal show={props.show}>
    <Modal.Body>
      {props.message}
    </Modal.Body>

    <Modal.Footer>
      <Button onClick={props.hideModal}>Ok</Button>
    </Modal.Footer>
  </Modal>
);

show and hideModal props are passed in automatically.

Implementations

StackableModalProvider (default)

This is the default ModalProvider implementation. Each new modal stacks up on top of previous one.

import { StackableModalProvider } from 'react-redux-modal-provider';

export default render(
  <Provider store={store}>
    <div>
      <App />
      <StackableModalProvider />
    </div>
  </Provider>,
  document.getElementById('app')
);

SingleModalProvider

One modal at a time. Each new modal triggers hideModal on previous one.

import { SingleModalProvider } from 'react-redux-modal-provider';

export default render(
  <Provider store={store}>
    <div>
      <App />
      <SingleModalProvider />
    </div>
  </Provider>,
  document.getElementById('app')
);

How is it different from redux-modal?

  1. You don't have to think about where your modal component should fit into component tree, because it doesn't really matter where to render a modal.

  2. No need to connect() your modal component to Redux, unless you want it to be able to create other modals itself.

Acknowledgements

License

MIT

You might also like...
Create the next immutable state by mutating the current one

Immer Create the next immutable state tree by simply modifying the current tree Winner of the "Breakthrough of the year" React open source award and "

Redux - Create forms using Redux And React
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.
Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.

Crypto Tracker A single page application meant to keep track of the most popular crypto currencies status. The user can sort the coins by highest gain

Shop Cart Page Built Using React And Redux
Shop Cart Page Built Using React And Redux

Getting Started with react-redux-jest-shop Shop cart page with use: React,redux,redux-thunk, API,JEST, LTR Steps for run git clone or download react-r

Watchlist Movie App Using React Hooks With Redux

MovieRedux Watchlist Movie App Using React Hooks With Redux Technology Stack: Re

A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. 🚀 Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

RxJS middleware for action side effects in Redux using
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

Redux Implementation using ReactJS and JSON placeholder API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Toolkit for implementing clean architecture using Redux
Toolkit for implementing clean architecture using Redux

📐 Toolkit for implementing clean architecture using Redux 📐 🔩 Focuses on achi

Comments
  • Feature: Modal stacking shouldn't be a default behaviour

    Feature: Modal stacking shouldn't be a default behaviour

    Hey, thx for a nice approach to handling modals in react/redux applications. Works like a charm. However, it seems to me that stacking behaviour is not the one that people need by default. In most of the apps you need only one modal window opened at a time. So I propose at least create an option to change behaviour and at most make it default.

    enhancement 
    opened by smashercosmo 4
  • Fix for failed prop-type warning for component

    Fix for failed prop-type warning for component

    Hi, I'm create a modal layout using hooks and rbx (Bulma), and every time the modal is showed the message below appears.

    Warning: Failed prop type: Invalid prop modalProvider.stack[0].component supplied to SingleModalProvider.

    With this fix on prop-types, the message disappears.

    opened by alexssandrog 0
  • [RFC] Modal provider improvements

    [RFC] Modal provider improvements

    Alright, just want to start a discussion about what concerns me a bit about this project and how IMHO we can make things better)

    1. First of all, the main architectural idea of keeping react components in redux state seems fundamentally wrong. Because redux state should be completely serializable so that server side state hydration and time travel are possible. An alternative solution would be to just pass modal components directly to ModalProvider, like this
    import modalsConstants from './modals.constants.js';
    import LoginModal from './login.modal.js';
    import RestorePasswordModal from './restorePassword.modal.js';
    import ModalProvider from 'react-redux-modal-provider';
    
    const modals = {
      [modalsConstants.LOGIN_MODAL]: LoginModal,
      [modalsConstants.RESTORE_PASSWORD_MODAL]: RestorePasswordModal,
    }
    
    <ModalProvider modals={modals}/>
    
    1. Then, passing components to showModal action also looks not quite right. Because often you want to call your modal actions from within other actions, using redux-thunk or other solution for handling side-effects. And you really don't want to require your components in the actions files, because you don't want to mix universal/business-logic code with ui-related code. Passing modals to ModalProvider can also solve this issue. So invoking showModal action will look like this
    import modalsConstants from './modals.constants.js';
    
    showModal(modalsConstants.LOGIN_MODAL, {/** props */});
    
    1. Using eventemitter to avoid wrapping components in connect also doesn't look like a good idea for several reasons. By doing it you introduce extra uneeded dependency, add one more abstraction layer and a bit of magic, that could be confusing for the users. There is nothing wrong with wrapping component in connect. It's a standard way of doing things in react/redux stack and users have already got used to do this. Explicit is better than implicit. There won't be any performance implications because of extra connect wrappers, considering that you only provide mapDispatchToProps. For example react-router guys have recently removed subscription system responsible for handling context updates from react-router 4. Because they came up to conclusion, that it was confusing, complicated and not really react-way-ish)

    2. Having two different providers also is a kinda strange solution. What if you want both behaviours? What if you want to switch this stacking/non-stacking behaviours in runtime? How would you do that, using two providers? I think it would be better to handle it using different actions, like showModal and showSingleModal (though I don't know yet how to implement it).

    So these are my main concerns and suggestions. Please, tell what do you think about it and what is your personal vision)

    opened by smashercosmo 0
Releases(v2.0.0)
Owner
Maxim Yaskevich
Maxim Yaskevich
A lightweight state management library for react inspired by redux and react-redux

A lightweight state management library for react inspired by redux and react-redux

null 2 Sep 9, 2022
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Dec 30, 2022
Manage the state of your React app with ease

@spyna/react-store React app state management that uses a storage Demo https://spyna.github.io/react-store/ Install npm install --save @spyna/react-st

Lorenzo Spinelli 46 Jan 19, 2021
:recycle: higher order reducer to add undo/redo functionality to redux state containers

redux undo/redo simple undo/redo functionality for redux state containers Protip: Check out the todos-with-undo example or the redux-undo-boilerplate

Daniel Bugl 2.8k Jan 1, 2023
This command line helps you create components, pages and even redux implementation for your react project

react-help-create This command line helps you create components, pages and even redux implementation for your react project. How to install it? To ins

Omar 27 Dec 10, 2022
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 11 Jul 10, 2022
Redux Tutorial - share my experience regarding redux, react-redux and redux-toolkit

Redux Tutorial 1. Introduction to Redux 1.1 What is Redux & why Redux? A small JS Library for managing medium/large amount of states globally in your

Anisul Islam 36 Dec 29, 2022
Dead simple state management for React

Undux & TypeScript TodoMVC Example TodoMVC for Undux Installation git clone [email protected]:bcherny/undux-todomvc.git cd undux-todomvc npm install npm

Boris Cherny 11 Aug 10, 2020
🪢 World's Simplest React State Manager

?? resso World's Simplest React State Manager (React 18, React Native, SSR, Mini Apps) Reactive shared store of React. No more extra re-render English

南小北 305 Dec 30, 2022
A light-weight state manager.

Rectx a light-weight state manager with mutable api. 安装 npm install --save rectx 又一个轮子? Redux 和 Mobx 都非常的棒,但对于大部分项目都只是 CRUD 的项目来说,这些个玩意儿都略显太重了。而且对于 re

ZhengFang 177 Nov 17, 2022