@react-max/modal

Basic react modal popup

Usage no npm install needed!

<script type="module">
  import reactMaxModal from 'https://cdn.skypack.dev/@react-max/modal';
</script>

README

@react-max/modal

React modal dialogs. ⚛️

NPM JavaScript Style Guide

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