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