Skip to content

lonelyclick/react-dialog-native

Repository files navigation

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>
    );
  }
}

License

MIT

Copyright (c) 2017-present