chakraui-modal-wrapper
v1.0.2
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
17
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
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>
}
Changing the Size / Using ModalProps
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
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>
}