chakraui-modal-wrapper
v1.2.0
Published
A simple Wrapper for the Chakra UI Modal. Made as I wanted to simplify the Modal component which I used extensively in my code.
Downloads
26
Readme
Chakra Modal Wrapper
Simple Wrapper for Chakra UI's Modal, while maintaining flexibility
Installation
Chakra UI needs to be installed, follow Installing ChakraUI
(TLDR for npm. Please note that you still need to setup the ChakraProvider as well, if you've already have it installed just install chakraui-modal-wrapper
)
npm
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion chakraui-modal-wrapper
yarn
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion chakraui-modal-wrapper
Props
The <SimpleModal>
extends ModalProps
of ChakraUI, so you can directly inject those props to <Modal>
component. For the other components inside (<ModalBody>
,<ModalHeader>
,<ModalOverlay>
,<ModalFooter>
,<ModalContent>
,<ModalCloseButton>
), you may inject props via the elementProps
prop (see table)
| Props | Type | Description |
---|---|---|
title | React.ReactNode | Title of Modal |
body | React.ReactNode | React.ReactNode[] | Content of Modal |
footer | React.ReactNode | React.ReactNode[] | Footer of Modal (if needed) |
hideCloseButton | boolean | Hides Close Button (Close Button shown by default)
hideOverlay | boolean | Hides Overlay (Overlay shown by default)
elementProps| Object ElementTypecloseButtonPropsPartial<ModalCloseButtonProps>
overlayPropsPartial<ModalOverlayProps>
contentPropsPartial<ModalContentProps>
bodyPropsPartial<ModalBodyProps>
headerPropsPartial<ModalHeaderProps>
footerPropsPartial<ModalFooterProps>
|Props for the Chakra UI Elements |
elementRefs | Object ElementTypecloseButtonRefRefObject<HTMLButtonElement>
overlayRefRefObject<HTMLDivElement>
contentRefRefObject<HTMLDivElement>
bodyRefRefObject<HTMLDivElement>
headerRefRefObject<HTMLDivElement>
footerRefRefObject<HTMLDivElement>
| Refs for the Chakra UI Elements
<SimpleModalButton>
has the same props as <SimpleModal>
with the addition of
| Props | Type | Description |
---|---|---|
buttonTitle|React.ReactNode|Title for Button |
buttonProps|ButtonProps|Props for Button|
buttonComponent|React.FC<{ ...buttonProps, children: React.ReactNode, onClick : /on Open function, so use this to open the modal/}>|Replaces the Button with another element
Note : When using SimpleModalButton you may access the useDisclosure methods used for the button using the
useSimpleModalButton()
hook. It provides the methods of the
useDisclosure that the current Modal Context uses.
Usage
Basic Usage
import {SimpleModal} from "chakraui-modal-wrapper"
const MyModalPage = () => {
// Use a state or useDisclosure since this is
// wrapping chakra UI
const {isOpen, onClose, onOpen} = useDisclosure()
return <div>
<button onClick={onOpen}>Open Modal</button>
<SimpleModal
isOpen={isOpen}
onClose={onClose}
// Use a ReactNode
title="Modal Title"
// Use a ReactNode
body={<div>
<p>My Modal Body</p>
</div>}
isOpen
/>
</div>
}
import {SimpleModalButton} from "chakraui-modal-wrapper"
const MyModalPage = () => {
// No need onDisclosure as the button is already
// added to the component
return <SimpleModalButton
size="4xl" // Extends ModalProps, autocomplete is included
p={4} // Extends ModalProps
// Use a ReactNode
title="Modal Title"
// Use a ReactNode
body={<div>
<p>My Modal Body</p>
</div>}
buttonTitle="Open Modal"
buttonProps={{
p: 4,
colorScheme: "blue" // All the ButtonProps for Chakra
}}
/>
}
Changing the Size / Using ModalProps
import {SimpleModalButton} from "chakraui-modal-wrapper"
const MyModalPage = () => {
// Use a state or useDisclosure since this is
// wrapping chakra UI
const {isOpen, onClose, onOpen} = useDisclosure()
return <div>
<button onClick={onOpen}>Open Modal</button>
<SimpleModalButton
size="4xl" // Extends ModalProps, autocomplete is included
p={4} // Extends ModalProps
isOpen={isOpen}
onClose={onClose}
// Use a ReactNode
title="Modal Title"
// Use a ReactNode
body={<div>
<p>My Modal Body</p>
</div>}
isOpen
/>
</div>
}
Injecting Props to Other Components
import {SimpleModal} from "chakraui-modal-wrapper"
const MyModalPage = () => {
// Use a state or useDisclosure since this is
// wrapping chakra UI
const {isOpen, onClose, onOpen} = useDisclosure()
return <div>
<button onClick={onOpen}>Open Modal</button>
<SimpleModal
size="4xl" // Extends ModalProps, autocomplete is included
p={4} // Extends ModalProps
elementProps={{
footerProps: {p:4, borderColor:'red.400',borderWidth:2} // ModalFooterProps
bodyProps: {p:2, backgroundColor:'blue.300', } // ModalBodyProps
}}
isOpen={isOpen}
onClose={onClose}
// Use a ReactNode
title="Modal Title"
// Use a ReactNode
body={<div>
<p>My Modal Body</p>
</div>}
isOpen
/>
</div>
}
Injecting Refs to components
import {SimpleModal} from "chakraui-modal-wrapper"
const MyModalPage = () => {
// Use a state or useDisclosure since this is
// wrapping chakra UI
const {isOpen, onClose, onOpen} = useDisclosure()
const footerRef = useRef<HTMLDivElement>()
return <div>
<button onClick={onOpen}>Open Modal</button>
<SimpleModal
elementRefs={{
footerRef: footerRef // Each component can be given a ref except for the main Modal, which doesnt have a ref
}}
isOpen={isOpen}
onClose={onClose}
// Use a ReactNode
title="Modal Title"
// Use a ReactNode
body={<div>
<p>My Modal Body</p>
</div>}
isOpen
/>
</div>
}
Using a Custom Button with the Simple Modal
import {SimpleModalButton, ButtonElementProps} from "chakraui-modal-wrapper"
const CustomButton = (props: ButtonElementProps) => {
return <CustomButton onClick={props.onClick} {...props} />
}
const MyModalPage = () => {
// No need onDisclosure as the button is already
// added to the component
return <SimpleModalButton
size="4xl" // Extends ModalProps, autocomplete is included
p={4} // Extends ModalProps
// Use a ReactNode
title="Modal Title"
// Use a ReactNode
body={<div>
<p>My Modal Body</p>
</div>}
buttonTitle="Open Modal"
buttonElement={CustomButton}
/>
}
Using the useSimpleModalButton to control modal
import {SimpleModalButton, useSimpleModalButton} from "chakraui-modal-wrapper"
const MyModalPage = () => {
// No need onDisclosure as the button is already
// added to the component
return <SimpleModalButton
size="4xl" // Extends ModalProps, autocomplete is included
p={4} // Extends ModalProps
// Use a ReactNode
title="Modal Title"
// Use a ReactNode
body={<MyComponent />}
buttonTitle="Open Modal"
/>
}
const MyComponent = () => {
const {isOpen, onClose} = useSimpleModalButton()
return <div>
{isOpen ? "Modal is Open" : "Modal is Closed"}
<button onClick={onClose}>Close Modal</button>
</div>
}