@blunck/react-modal

Simple modals in react

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
01Aug 29, 2018Nov 22, 2017Minified + gzip package size for @blunck/react-modal in KB

Readme

react-modal

Latest Version on NPM

Simple modals in react

Installation

npm i @blunck/react-modal

Import styles in your scss

@import '@blunck/react-modal/src/index.scss';

Getting Started

Add <Modals /> component to your app. This is where the modal is rendered.

import { Modals } from '@blunck/react-modal'

export default function App() {
    return (
        <div className="App">
            <Modals />
        </div>
    )
}

Display Modal

Display a modal using the Modals.display method, pass it a react component to render as its content. Optionally you can pass an options object as the 2nd argument:

import { Modals } from '@blunck/react-modal'

Modals.display(MyComponent, {
  title: 'My Title'
})

Options:

{String} title   - Title to display in modal header
{Number} width   - Modal window width
{Number} height  - Modal window height
{Number} padding - Modal window content padding
{Object} props   - Props to pass to component

Dismiss Modal

Since you can currently only display a single modal at a time, you can use the Modals.dismiss method to dismiss that modal:

Modals.dismiss()

Limitations

  • You can currently only display a single modal at a time

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.