Modals

HomeflowJS includes its own modal system. To use it, first include an empty div on each page for modals to be rendered into:

<div id="modal-container"></div>

Then import your modals and render them as children of the Modal component from homeflowjs. You must also provide a path prop that will cause them to render:

import { withHomeflowState, Modal } from 'homeflowjs';
import ContactModal from './modals/branch-contact-modal';
import StaffContactModal from './modals/staff-contact-modal';

const Modals = () => (
  <Modal>
    <ContactModal path="/contact" />
    <StaffContactModal path="/staff-contact/:id" />
  </Modal>
);

ReactDOM.render(
  withHomeflowState(Modals),
  document.getElementById('modal-container'),
);

A path of /staff-contact/:id will cause the modal to be rendered when the fragment identifier (hash) is e.g. #/staff-contact/123. Your modal will also be passed these params (in this case id), which you can access inside your modal component using props.match.params.

If you pass the prop withUserModal to the Modal component, it will include the default user profile system and its routes.

<Modal withUserModal>
  <StaffContactModal path="/staff-contact/:id" />
</Modal>

If you intend to create your own custom user profile modal instead, omit this prop and include your modal as a child of the Modal component as you would any other modal. See the section on the User Profile components for more information.