react-common-modal

Simple Modal Dialog

Installation

With npm

npm i react-common-modal --save --save-exact

With yarn

yarn add react-common-modal -E

Usage

./Dialog.js

import React from "react";
import {
  DialogTitle,
  DialogContent,
  DialogActions,
  Dialog as UIDialog,
} from "react-common-modal";

Dialog.propTypes = {
  open: PropTypes.bool,
  onRequestClose: PropTypes.func,

  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
  showCloseButton: PropTypes.bool,
  children: PropTypes.node.isRequired,
  position: PropTypes.string,
  alignActions: PropTypes.string
};

export default function Dialog(props) {
  return(
    <UIDialog open={props.open} position={props.position}>
      <DialogTitle
        title={props.title}
        onClose={props.showCloseButton ? props.onRequestClose : null}
      />

      <DialogContent>{props.children}</DialogContent>

      <DialogActions align={props.alignActions}>
        <Button onClick={props.onRequestClose}>Close</Button>
      </DialogActions>
    </UIDialog>
  )
}

./App.js

import React from "react";
import Dialog from "./Dialog";

export default class App extends React.Component {
  constructor() {
    super();

    this.state = {
      showModal: false
    }
  }

  render() {
    <div>
      <button
        onClick={() => this.setState({ showModal: true })}
      >
        Open Modal
      </button>

      <Dialog
        title="Dialog Title"
        alignActions="center"
        position="top-center"
        showCloseButton={true}
        open={this.state.showModal}
        onRequestClose={this.setState({ showModal: false })}
      >
        <h5>Dialog Content</h5>
      </Dialog>
    </div>
  }
}

Props

Dialog

|Name|Type|Default|Description| |----|:----:|:-------------:|-----------| |open|Boolean|false|If true the Modal Dialog is open| |position|String:top-left | top-center | top-right center-left | center | center-rightbottom-left | bottom-center | bottom-right|center|Position Modal Dialog on the page| |children|Node||Modal Dialog children, usually the included sub-components| |className|String||The className to add to the content container| |backdropClassName|String||The className to add to the overlay container|

DialogTitle

|Name|Type|Default|Description| |----|:----:|:-------------:|-----------| |title|String | Node||The title to display on the Modal Dialog| |onClose|Func||Fired when to be click on the close button| |className|String||The className to add to the content container| |titleClassName|String||The className to add to the title container|

DialogContent

|Name|Type|Default|Description| |----|:----:|:-------------:|-----------| |children|Node||Content children, usually the included sub-components| |className|String||The className to add to the content container|

DialogActions

|Name|Type|Default|Description| |----|:----:|:-------------:|-----------| |align|String:start | center | end|end|Align actions content | |children|Node||Actions children, usually the included sub-components| |className|String||The className to add to the content container|

Live Example

https://react-common-modal.firebaseapp.com/

Licence

MIT