@react-max/modal NPM

@react-max/modal

React modal dialogs. ⚛️

Install

For support for react <16.8
# If you use npm:
npm install --save @react-max/modal

Or if you use Yarn:

yarn add @react-max/modal

## Usage

```tsx
import React, { Fragment, useState } from 'react'
import Modal from '@react-max/modal'

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <Fragment>
      <button type="button" onClick={() => setVisible(true)}>
        open modal
      </button>

      <Modal
        title="Modal"
        visible={visible}
        onClose={() => setVisible(false)}
      >
        contents
      </Modal>
    </Fragment>
  );
}

Live Demo

Props

Name	Type	Default	Description
visible	`boolean`	`false`
children	`ReactNode`
onClose	`() => void`
title	`ReactNode`
width	`number`	`string`	`520`
zIndex	`number`	`1000`
mask	`boolean`	`true`
closeButton	`ReactNode`
showsCloseButton	`boolean`	`true`
isMaskClosable	`boolean`	`true`
isEscKeyClosable	`boolean`	`true`
isCenteredMode	`boolean`	`false`
isExpandedMode	`boolean`	`false`
modalClassName	`string`
maskClassName	`string`
bodyClassName	`string`
contentClassName	`string`
modalStyle	`CSSProperties`
maskStyle	`CSSProperties`
bodyStyle	`CSSProperties`
contentStyle	`CSSProperties`