chakra-multi-modal v1.0.1

Chakra UI MultiModal

This component is a wrapper for a basic Chakra's Modal component. It provides its own Context along with Section and (optional) Footer components for switching content inside one opened Modal.

This version (1.x) of MultiModal was created for Chakra UI v2. MultiModal wasn't tested for previous Chakra's versions.

Contents

• Usage
• Components
  • MultiModal
  • MultiModalSection
  • MultiModalFooter
• Hook useMultiModal
• Additional screenshots
• Contributing

Usage

In order to use this package, you'll need to have @chakra-ui/react@2 set up like in their docs

Then install this package:

npm i chakra-multi-modal
# or
yarn add chakra-multi-modal
# or
pnpm add chakra-multi-modal

Once installed, you can replace Modal with MultiModal and add your sections to it:

const modalProps = useDisclosure();

return (
  <MultiModal sections={[<FirstSection />, <SecondSection />]} {...modalProps}>
    <ModalOverlay />
    <ModalContent>
      <ModalHeader>Title</ModalHeader>
      <ModalCloseButton />
      <MultiModalSection />
      <MultiModalFooter />
    </ModalContent>
  </MultiModal>
);

Components

MultiModal

Replaces with Modal component

MultiModalSection

This component is required and should be replaced with ModalBody component. Takes all ModalBody's props excluding children.

MultiModalFooter

Optional component. Replaces ModalFooter and adds buttons for switching sections. Doesn't include children.

Hook useMultiModal

If default MultiModalFooter doesn't meet your requirements you can remove it and build your own Footer or even add switching buttons to each section.

Additional screenshots

Contributing

Found a bug? Do you see something that can be done better? Feel free to open an issue or fork this repo and open a Pull Request. Please read Contribution Doc before contributing.