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 https://github.com/cornflourblue/jw-react-modal

Demo

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

Installation

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';


Usage

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

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

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


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 (
            <div>
                ...

                <JwModal id="jw-modal-1" style={customStyles}>
                    ...
                </JwModal>
            </div>
        );
    }
}

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

 

Web Development Sydney

Feel free to contact me if you're looking for a web developer in Sydney, I also provide remote contracting services for clients outside Sydney.

 


Sponsored by