Modalo NPM | npm.io

Modalo

React, component for displaying modals. Uses plain React component or connected to redux store.

React Component

`createModal(types, [renderer])`

Returns React component, and then we select modal to render passing string id as a component prop.

argument	type	description
types	object	pairs of modal id and modal React component
renderer	React component	custom renderer

Use custom renderer when have different requirements which default one haven't meet props:

prop	type	desscription
component	string	key of the modal to render
onOverlayClick	function	overlay click handler

import { createModal } from 'modalo';
import { render } from 'react-dom';

const Modal = createModal({
  'modal-one': ModalOne,
  'modal-two': ModalTwo
});

render(<Modal component="modal-one" />, document.body);

Styles

Load default renderer styles:

import 'modalo/dist/Renderer/Renderer.css';

Redux connected React component

`createReduxModal(types, [renderer])`

Creates connected React component.

`createReducer([customReducer])`

'modal' state branch is only supported.

const rootReducer = combineReducers({
  modal: createReducer()
});

argument	type	description
customReducer	function	let you change state on custom actions. You are free to change state as you need, however only openModal, closeModal helper reducers are recommended to not malform state

Custom reducer

import { createReducer, openModal, closeModal } from 'modalo';
const customReducer = (state, action) => {
  switch (action.type) {
    case 'USER_NEEDS_TO_CONFIRM_ACTION': {
      return openModal(state, 'confirm-modal');
    }
    case 'USER_CONFIRMED': {
      return closeModal(state);
    }
    defautl: {
      return state;
    }
  }
};
const reducer = createReducer(customReducer);

import { combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { render } from 'react-dom';
import { createReduxModal, createReducer } from 'modalo';

const Modal = createReduxModal({
  'confirm-modal': ConfirmModal
});
const rootReducer = combineReducers({
  modal: createReducer()
});
const store = createStore(rootReducer, {});

render(
  (
    <Provider store={store}>
      <Modal />
    </Provider>
  ),
  document.body);