@tgdn/react-modal
An accessible, easy to use, customizable modal library for the web
Last updated 3 years ago by tgdn .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @tgdn/react-modal 
SYNC missed versions from official npm registry.

React Modal npm version

An accessible, easy to use, customizable modal library for the web.

Ongoing work on the library.

Playground

To run demo on your computer

Installing

npm install --save @tgdn/react-modal

Usage

import React from 'react'
import {
    ModalContent,
    Modal,
    ModalComposite,
} from '@tgdn/react-modal'

class MyModalView extends React.Component {
    constructor(props) {
        super(props)
        this.closeOnClick = this.closeOnClick.bind(this)
        this.showDialog = this.showDialog.bind(this)
    }

    closeOnClick() {
        this.modal.hide()
    }

    showDialog() {
        this.modal.show()
    }

    render() {
        return (
            <ModalComposite>
                <button className='btn' onClick={this.showDialog}>open</button>
                <Modal ref={(c) => {this.modal = c}}>
                    <ModalContent>
                        This is an example
                        <br />
                        <br />
                        <button
                            className='btn'
                            onClick={this.closeOnClick}
                        >
                            Close with a button
                        </button>
                    </ModalContent>
                </Modal>
            </ModalComposite>
        )
    }
}

Configuration

Different prop types are available for use on Modal

Prop Default Value Description
visible false true/false Whether the modal should be visible after mounting
closeOnClick true true/false If true, clicking outside the modal will hide it
keyboard true true/false or function If true, pressing Escape will close the modal, if a function is provided, it will be called whenever a key is pressed
canClose true true/false If true, a close button will be displayed, and clicking on it will hide the modal

Done

  • Simple UI
  • Reactive Component

Current Tags

  • 0.0.18                                ...           latest (3 years ago)

17 Versions

  • 0.0.18                                ...           3 years ago
  • 0.0.17                                ...           3 years ago
  • 0.0.16                                ...           3 years ago
  • 0.0.15                                ...           3 years ago
  • 0.0.14                                ...           3 years ago
  • 0.0.13                                ...           3 years ago
  • 0.0.12                                ...           3 years ago
  • 0.0.11                                ...           3 years ago
  • 0.0.10                                ...           3 years ago
  • 0.0.9                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago

Copyright 2014 - 2017 © taobao.org |