https://github.com/manjillama/plain-react-modal

Lightweight easy to use, highly customizable react modal
https://github.com/manjillama/plain-react-modal

modal react react-dom react-modal

Last synced: about 1 year ago
JSON representation

Lightweight easy to use, highly customizable react modal

• Host: GitHub
• URL: https://github.com/manjillama/plain-react-modal
• Owner: manjillama
• License: mit
• Created: 2020-07-28T15:38:10.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T02:14:54.000Z (almost 2 years ago)
• Last Synced: 2025-02-22T03:04:28.330Z (about 1 year ago)
• Topics: modal, react, react-dom, react-modal
• Language: JavaScript
• Homepage: https://codepen.io/manjiltamang/project/full/AJyNaq
• Size: 1.03 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# plain-react-modal

Lightweight easy to use, highly customizable react modal

[![Build Status](https://travis-ci.org/manjillama/plain-react-modal.svg)](https://travis-ci.org/manjillama/plain-react-modal)

[![NPM](https://img.shields.io/npm/v/plain-react-modal.svg)](https://www.npmjs.com/package/plain-react-modal) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![License](https://img.shields.io/github/license/manjillama/plain-react-modal.svg)](LICENSE)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md)

## Installation

To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):

    $ npm install plain-react-modal

    $ yarn add plain-react-modal

## Requirements

- React >= 16.x

- ReactDOM >= 16.x

## Usage

```jsx

import React, { Component } from 'react'

import Modal from 'plain-react-modal'

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

class Example extends Component {

  render() {

    return (

       {

          // code here

        }}

        title='Modal title'

        overlayColor='rgba(255, 255, 255, .8)'

        backgroundColor='#FFF'

      >

        
Woohoo, you're reading this text in a 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](https://codepen.io/manjiltamang/project/full/AJyNaq)

## Contributing

Pull requests are welcome! You can create an issue or send in a PR. Please see [here](https://github.com/manjillama/plain-react-modal/blob/master/CONTRIBUTING.md).

## License

MIT © [manjillama](https://github.com/manjillama)