https://github.com/netojose/react-modal

A lightweight dialog component for React
https://github.com/netojose/react-modal

dialog hacktoberfest modal react react-component

Last synced: about 7 hours ago
JSON representation

A lightweight dialog component for React

• Host: GitHub
• URL: https://github.com/netojose/react-modal
• Owner: netojose
• License: mit
• Created: 2019-07-07T13:50:23.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-01T06:09:32.000Z (12 months ago)
• Last Synced: 2024-10-13T00:28:36.916Z (about 1 month ago)
• Topics: dialog, hacktoberfest, modal, react, react-component
• Language: JavaScript
• Homepage: https://codesandbox.io/s/react-modal-example-3km0w
• Size: 1.61 MB
• Stars: 9
• Watchers: 1
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# A lightweight dialog component for React

## Demo

https://codesandbox.io/s/react-modal-example-3km0w

## Install

```

npm i @netojose/react-modal

```

or

```

yarn add @netojose/react-modal

```

## Basic usage

```js

import React, { useState, useCallback } from 'react'

import Modal from '@netojose/react-modal'

function App() {

    const [isOpen, setIsOpen] = useState(false)

    const openModal = useCallback(() => setIsOpen(true), [])

    const closeModal = useCallback(() => setIsOpen(false), [])

    return (

        


            

            

                
This is the modal content

                

            

        

    )

}


export default App

```

## API

| prop                | Description                                     | type     | default value         | required |

| ------------------- | ----------------------------------------------- | -------- | --------------------- | -------- |

| isOpen              | Flag to render or not the modal                 | boolean  | false                 | Yes      |

| ariaLabelledby      | `aria-labelledby` modal attribute               | string   | null                  | No       |

| ariaDescribedby     | `aria-describedby` modal attribute              | string   | null                  | No       |

| onAfterOpen         | Callback after modal open                       | function | () => null            | No       |

| onAfterClose        | Callback after modal close                      | function | () => null            | No       |

| onRequestClose      | Callback when a close modal action is triggered | function | () => null            | No       |

| closeOnOverlayClick | Flag to request close modal on overlay click    | boolean  | true                  | No       |

| closeOnEsc          | Flag to request close modal on press esc key    | boolean  | true                  | No       |

| focusAfterRender    | Flag to modal should be focused after render    | boolean  | true                  | No       |

| portalClassName     | Portal div class name                           | string   | ReactModal\_\_Portal  | No       |

| overlayClassName    | Overlay div class name                          | string   | ReactModal\_\_Overlay | No       |

| modalClassName      | Modal div class name                            | string   | ReactModal\_\_Modal   | No       |

| overlayStyles       | Extra overlay styles                            | object   | {}                    | No       |

| modalStyles         | Extra modal styles                              | object   | {}                    | No       |

| container           | Query selector to append portal                 | string   | body                  | No       |