Homeless Modal

Universal Modal that uses redux state

How to use

1. Install module:

yarn add @home-app/redux-modal.module

1. Add redux state:

import { reducer as modalReducer } from '@home-app/redux-modal.module';

rootReducer = combineReducers({
  potato: potatoReducer,
  tomato: tomatoReducer,
  ...
  modal: modalReducer,
})

2. Create modal config

export const modalIds = {
  EXAMPLE_MODAL: 'EXAMPLE_MODAL',
};

const modalConfig = {
  [modalIds.EXAMPLE_MODAL]: props => <ExampleModal {...props} />,
};

3. Create ModalComponent and put it somewhere inside react root element

import { modalFactory } from '@home-app/redux-modal.module';

const Modal = modalFactory({
  reduxName: 'modal', // name of reducer from step 1 (default modal)
  config: modalConfig, // modal config from step 2
  appElement: '#root', // selector of react root element 
  classNamePrefix: 'redux-modal', // css classNames prefix (default redux-modal)
});


export default RootComponent = props => <div>
  <OtherStuff />
  <Modal />
</div>

4. Connect action creators to component from step 3

import { actions } from '@home-app/redux-modal.module';

...

const mapDispatchToProps = dispatch => ({
  openModal: (id, params) => dispatch(actions.modalOpen(id, params),
});

export default connect(null, mapDispatchToProps)(RootComponent));

5. Add openHandlers wherever you want

...
<input
  type="button"
  onClick={() => this.props.openModal(modalIds.EXAMPLE_MODAL)}
  value="PUSH ME"
/>

second argument for openModal() will be passed to modal component as props