1.2.0 • Published 3 years ago
@frankhu00/react-modal v1.2.0
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
showis used to toggle the css display rulezIndexsets z-index rulecloseOnBackdropwill set the cursor rulestageis used to determine the component's rendering stage (entering vs exiting) to use either fade in or fade out animationanimationDurationspecifies the duration of the animation