Simple modals in react


010.6.03 years ago4 years agoMinified + gzip package size for @blunck/react-modal in KB



Latest Version on NPM

Simple modals in react


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 />

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'


{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:



  • 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.