plain-react-modal

Lightweight easy to use, highly customizable react modal

Installation

To install, you can use npm or yarn:

$ npm install plain-react-modal
$ yarn add plain-react-modal

Requirements

• React >= 16.x
• ReactDOM >= 16.x

Usage

import React, { Component } from 'react'

import Modal from 'plain-react-modal'
import 'plain-react-modal/dist/index.css'

class Example extends Component {
  render() {
    return (
      <Modal
        onClose={() => {
          // code here
        }}
        title='Modal title'
        overlayColor='rgba(255, 255, 255, .8)'
        backgroundColor='#FFF'
      >
        <p>Woohoo, you're reading this text in a modal!</p>
      </Modal>
    )
  }
}

Options

| Property | Type | Description | | ------------------ | ------- | ---------------------------------------------------------- | | onClose (required) | func | Called when user clicks on close button | | title | String | Modal title | | overlayColor | String | Modal overlay color i.e. rgba(255, 255, 255, .8) | | backgroundColor | String | Modal dialog background color i.e. #FFF | | noShadow | boolean | Modal dialog shadow (default value is false) | | styles | object | Modal css style i.e. {maxWidth: '960px', color: '#2c3543'} |

Demo

Demo available at CodePen

Contributing

Pull requests are welcome! You can create an issue or send in a PR. Please see here.

License

MIT © manjillama