Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

Modal

Description#

The Modal as the name suggests is used to create Modals.

Import#

it can be imported from the core.

Code Example

import { Modal } from "@codecraftkit/core";

or alone.

Code Example

import Modal from "@codecraftkit/modal";

Usage#

We recommend to use the hook useDisclosure from Chakra ui, to manage the modal states

Code Example

function MyApp() {
  const {isOpen, onOpen, onClose} = useDisclosure();
  return (
    <>
      <Button size='xs' onClick={onOpen}>Open Modal</Button>
      <Modal
        title='Modal Title'
        buttonText='New'
        body={<Grid placeItems="center" h="500px">
          Text Inside The Modal
        </Grid>}
        closeOnOverlayClick={false}
        onOpen={onOpen}
        isOpen={isOpen}
        onClose={onClose}
      />
    </>
  )
}

Props#

name

type

required

default

description

title

String

no

The title of the Modal

body

ComponentString

no

Component that will be the content of the Modal

isOpen

Boolean

Yes

false

specify if the modal is open or closed

size

xssmmdlgxlfull

no

xl

specify if the size of the modal

boxSize

px%emrem

no

specify if the size of the modal, in any unit

motionPreset

String

no

Animation Type

onClose

Function

yes

Call when the component is closing

closeOnOverlayClick

Boolean

no

false

Specifies whether or not the modal is closed when you click outside it.

closeOnESC

Boolean

no

false

Specifies whether the modal is closed when the ESC key is pressed.

isDisabled

Boolean

no

false

specify when the close button of the modal is disabled or not

modalContentStyles

Object

no

Customize Modal Content Styles

modalBodyStyles

Object

no

Customize Modal Body Styles

modalHeaderStyles

Object

no

Customize Modal Header Styles

modalExtraProps

Object

no

Send props to Chakra Modal

...rest

chakra style props

no

Other Props That received the Modal ComponentChakra ui Modal