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
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.
- Follow me on Twitter at https://twitter.com/jason_watmore
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
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.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some React Help?
Search fiverr to find help quickly from experienced React developers.
Support my work
