React Modal

A simple react + styled-components modal

Package Interface

Named exports: Modal, useModalContext, ModalContainer, and ModalContent
Default export: Modal

Usages

1) Pass in a function as children to access modal methods

<Modal content={() => <div>Modal Content</div>}>
    {({ showModal }) => <button onClick={showModal}>Button to trigger modal</button>}
</Modal>

2) Modal methods are passed to the direct descendant

const SampleButton = ({ showModal }) => {
    return <button onClick={showModal}>Sample Button</button>;
};

<Modal content={() => <div>Modal Content</div>}>
    <SampleButton />
</Modal>;

3) Using ContextAPI to access modal methods

const GrandchildButton = () => {
    const { showModal } = useModalContext();

    return <button onClick={showModal}>Grandchild Button</button>;
};

<Modal content={() => <div>Modal Content</div>}>
    <div className="component-container">
        <GrandchildButton />
    </div>
</Modal>;

Modal Props

| Prop | Type | Default | Description | | --------------------- | ---------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | content | Component | () => Component | undefined | A component or function that returns a component to serve as the modal content | | onModalShow | func | undefined | Function to trigger when the modal is shown | | onModalClose | func | undefined | Function to trigger when the modal is closed | | animationDuration | number | 500 | The fade in / out duration in ms | | showOnRender | boolean | false | If true, modal will display when mounted | | showXBtn | boolean | true | If true, a "x" button will rendered at the top right of the modal | | persist | boolean | false | If true, the modal will be mounted in dom and hidden / shown via CSS | | closeOnBackdrop | boolean | true | If true, clicking on the backdrop will close the modal | | addControls | boolean | false | If true, modal will automatically append two action buttons: "Close" and "Confirm". The "Close" button will close the modal, and the action of the "Confirm" is dependent on "proceedAction" prop | | proceedAction | func | () => console.warn(...) | The onClick handler for the "Confirm" button created from "addControls" prop | | proceedBtnText | string | "Confirm" | The text displayed for "Confirm" button | | closeBtnText | string | "Close" | The text displayed for "Close" button | | CustomModalContainer | Component | ModalContainer | Defines the component that warps around the entire modal | | CustomModalContent | Component | ModalContent | Defines the component used to wrap around the modal content | | CustomPrimaryButton | Component | button element | The component that is used to generate the "Confirmed" button | | CustomSecondaryButton | Component | button element | The component that is used to generate the "Closed" button |

Modal Methods

Below are the methods available to control the modal

| Method | Inputs | Description | | ---------------------- | ------------------------------------------------ | --------------------------------- | | showModal | none | Displays the modal | | closeModal | none | Closes the modal | | toggleModal | none | Toggles the state of the modal | | setDynamicContent | Component | Func Component | Updates the contents of the modal | | updateOptions | { showXBtn, addControls, ...etc } | Updates the specified option | | updateCustomComponents | { Container, Content, PrimaryBtn, SecondaryBtn } | Updates the custom components |

Additional Notes

ModalContainer styled component

Extend ModalContainer with styled-components to make furthur css changes since this component is looking for show, zIndex, closeOnBackdrop, stage, animationDuration prop for animations and default styling

• show is used to toggle the css display rule
• zIndex sets z-index rule
• closeOnBackdrop will set the cursor rule
• stage is used to determine the component's rendering stage (entering vs exiting) to use either fade in or fade out animation
• animationDuration specifies the duration of the animation