@c4605/react-modal v0.5.0

name: Modal

@c4605/react-modal

import { useState, useCallback, useMemo } from 'react' import { Playground, Props } from 'docz' import { Modal, useModal } from './src/Modal'

Introduction

A simple modal component. Provide react hook useModal.

Properties

Basic Usage

return (
  <>
    <button onClick={showModal}>show modal</button>
    <Modal visible={visible} onVisibleChange={setVisible}>
      <div style={{
        "display": "flex",
        "alignItems": "center",
        "justifyContent": "center",
        "maxWidth": "576px",
        "width": "calc(100vw - 72px)",
        "height": "100px",
        "borderRadius": "6px",
        "background": "#fff",
      }}>
        <button onClick={hideModal}>hide modal</button>
      </div>
    </Modal>
  </>
)

}}

Use React Hook

return (
  <>
    <button onClick={helpers.show}>show modal</button>
    {modal}
  </>
)

}}