Published: February 23 2018

npm - JW React Modal Dialog

Based on a previous post that I did showing a React custom modal window / dialog box, I extracted the modal component from the example and published it to npm to make it easier for people to use.

The source code for the component is available on GitHub at


A demo is available at React - Custom Modal Window / Dialog Box


npm install jw-react-modal

Integration with your React app

Import the component into any React component that you'd like to use it in:

import JwModal from 'jw-react-modal';


Add modals to any of your React components using the <JwModal id="my-modal-id"> tag, and open and close modals by calling'my-modal-id') and JwModal.close('my-modal-id'), for example:

<button onClick={'jw-modal-1')}>Open JW Modal 1</button>

<JwModal id="jw-modal-1">
    <h1>A JW Modal!</h1>
        Add any html you like in here :)
    <button onClick={JwModal.close('jw-modal-1')}>Close</button>

Custom Styling

The modal comes with some built in default styles, but these can be added to or overridden by passing a custom style object to the JwModal component like this:

import React from 'react';
import JwModal from 'jw-react-modal';

const customStyles = {
    body: {
        backgroundColor: 'red',
        fontSize: 100
    background: {
        backgroundColor: 'green',

class HomePage extends React.Component {
    render() {
        return (

                <JwModal id="jw-modal-1" style={customStyles}>

export { HomePage }; 

You can also add custom styles in your css with the following classes:

  • .jw-modal - Modal container / wrapper
  • .jw-modal-body - Modal body / content area
  • .jw-modal-background - Modal background / overlay


Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.

Other than coding...

I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.

Need Some React Help?

Search fiverr to find help quickly from experienced React developers.

Supported by