@c4605/react-modal
import { useState, useCallback, useMemo } from 'react' import { Playground, Props } from 'docz' import { Modal, useModal } from './src/Modal'
Last updated 7 months ago by bolasblack .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @c4605/react-modal 
SYNC missed versions from official npm registry.

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

<Props of={Modal} />

Basic Usage

<Playground> {() => { const [visible, setVisible] = useState(false) const showModal = useCallback(() => setVisible(true), [setVisible]) const hideModal = useCallback(() => setVisible(false), [setVisible])
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>
  </>
)

}} </Playground>

Use React Hook

<Playground> {() => { const [modal, helpers] = useModal({ children: helpers => (
<button onClick={helpers.hide}>hide modal</button>
), })
return (
  <>
    <button onClick={helpers.show}>show modal</button>
    {modal}
  </>
)

}} </Playground>

Current Tags

  • 0.4.0                                ...           latest (7 months ago)

6 Versions

  • 0.4.0                                ...           7 months ago
  • 0.3.0                                ...           10 months ago
  • 0.3.0-alpha.0                                ...           10 months ago
  • 0.2.0                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (4)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |