https://github.com/memcrab/react-pure-modal

React modal dialog
https://github.com/memcrab/react-pure-modal

dialog drag modal react

Last synced: 2 months ago
JSON representation

React modal dialog

• Host: GitHub
• URL: https://github.com/memcrab/react-pure-modal
• Owner: Memcrab
• Created: 2016-02-29T15:02:00.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-08-15T18:22:52.000Z (5 months ago)
• Last Synced: 2024-09-15T21:29:43.205Z (4 months ago)
• Topics: dialog, drag, modal, react
• Language: TypeScript
• Homepage: https://memcrab.github.io/react-pure-modal/
• Size: 8.84 MB
• Stars: 15
• Watchers: 2
• Forks: 15
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-pure-modal [![npm package](https://img.shields.io/npm/v/react-pure-modal.svg?style=flat-square)](https://www.npmjs.org/package/react-pure-modal) [![Build Status](https://travis-ci.org/memCrab/react-pure-modal.svg?branch=master)](https://travis-ci.org/memCrab/react-pure-modal)

[![NPM](https://nodei.co/npm/react-pure-modal.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-pure-modal/)

React pure modal is a simplest way to create dialog on your site.

- Very small (less than 4Kb)

- Mobile friendly

- Without dependencies

## Demo

https://memcrab.github.io/react-pure-modal/

## Installation

`npm i -S react-pure-modal`

## Usage

```jsx

import PureModal from 'react-pure-modal';

import 'react-pure-modal/dist/react-pure-modal.min.css';

const [modal, setModal] = useState(false);

      Cancel

      Save

    

  }

  isOpen={modal}

  closeButton="close"

  closeButtonPosition="bottom"

  onClose={() => {

    setModal(false);

    return true;

  }}

>

  
Your content

;

```


And open with

` setModal(true)}>Open simple modal`

## Options

#### replace `boolean` (default: false)

Replace all inner markup with Component children

#### isOpen: `boolean`

Control modal state from parent component

#### scrollable: `boolean` (default: true)

You can disable scroll in modal body

#### draggable: `boolean` (default: false)

You can drag a modal window

#### onClose: `Function`

Handle modal closing. Should change isOpen to false

#### className: `string`

ClassName for modal DOM element, can be used for set modal width or change behaviour on mobile devices

#### width: `string` (example '200px')

Width in pixels, em's, vw etc

#### header: `JSX.Element | string`

Modal heading, doesn't disabled close button

#### footer: `JSX.Element | string`

Place here your actions

#### closeButton: `(JSX.Element | string)`

Content of your closing button

#### closeButtonPosition: `string`

Place closing button under your modal or inside header. Allowed options: 'header' | 'bottom'

#### portal: `boolean` (default: false)

Creates React.Portal

## Changelog (latest on top)

- Removed double calling onClose on popup closing and unmount. onClose will be called only on: close button, backdrop, esc click

- Drag and drop

- fix bug in firefox and safari with modal position

- set width as atribute

- new default aligning to the screen center!

- prevent of modal closing if ESC pressed in editable element

- now with minified css!

- styles are more impressive now, good mobile support

- now scrollable can be false

- remove dependencies, rewrite open and close logic, fix linting

- new header logic and breaking classes changes

## Developing

- `npm install`

- `npm run webpack:dev -- --watch`

- `npm run webpack:prod -- --watch`

- `npm run test:dev`

- Open `index.html` from examples