react-common-modal

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-right bottom-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