react-modern-dialog

A modern dialog implementation for React. Enjoy!

Usage no npm install needed!

<script type="module">
  import reactModernDialog from 'https://cdn.skypack.dev/react-modern-dialog';
</script>

README

react-modern-dialog

A simple and modern dialog implementation for react.

Installation

# NPM
$ npm install --save react-modern-dialog
Version Compatibility
1.x React 16.8+

Basic usage

See DEMOS at react-modern-dialog

import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { Dialog } from 'react-modern-dialog';

const App = () => {
  const [ isVisible, setIsVisible ] = useState(true);
  render() {
    return (
      <div>
        {
          isVisible &&
          <Dialog
            onCloseClick={() => setIsVisible(false)}>
            <span>
              This is the dialog body.
            </span>
          </Dialog>
        }
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.body);

Properties

Name Type Required Description Default
title String The title of the Dialog [Empty]
className String Dialog class [Empty]
cancelable Boolean Whether the dialogs closes by clicking outside or not false
positiveText String Positive button text [Empty]
negativeText String Negative button text [Empty]
onPositiveClick function Positive button click function [Empty]
onNegativeClick function Positive button click function [Empty]
onCloseClick function :white_check_mark: Close button click function [Empty]

License

MIT © DenkSchuldt