@react-max/modal

@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

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

Thanks

Support it by joining stargazers for this repository. :star:

License

MIT © almond-bongbong