lonelyclick / react-dialog-native Goto Github PK

View Code? Open in Web Editor NEW

A React Dialog based on HTML5 <dialog>

JavaScript 93.00% HTML 3.29% CSS 3.71%

react-dialog-native's Introduction

React Dialog Native

A React Dialog based on HTML5 <dialog>

Introduction

Motivation

Some of the latest browsers already support the dialog tag, and dialog-polyfill already exists, and native dialog lacks some features.

open attribute cannot open backdrop at the same time
cannot add a click event for backdrop
react support

Tutorial

Installation

For NPM users:

npm install --save react react-dom prop-types dialog-polyfill // see package.json:peerDependencies
npm install --save react-dialog-native

For UMD user:

ReactDialogNative
React
ReactDOM
PropTypes
dialogPolyfill

API Reference

static propTypes = {
  open: PropTypes.bool,
  className: PropTypes.string,
  closeBackdropOnClick: PropTypes.bool,
  onClose: PropTypes.func.isRequired,
};

Example

import React from 'react';
import Dialog from 'react-dialog-native';

import 'dialog-polyfill/dialog-polyfill.css';
import 'react-dialog-native/dist/react-dialog-native.css'

export default class Example extends Component {
  render() {
    return (
      <Dialog open={dialogOpen1} onClose={this.handleClose}>
        This is a Dialog
        <button type="button" onClick={this.handleClose}>close</button>
      </Dialog>
    );
  }
}