ReactRailsModal
Accessible modal dialog component on react-rails.
Pre Installation
Before using react_rails_modal, install react-rails
.
Add react-rails
to your gemfile:
gem 'react-rails'
And install:
$ bundle install
Next, run the installation script:
$ rails g react:install
Installation
Add react_rails_modal
to your gemfile:
gem 'react_rails_modal'
And install:
$ bundle install
Next, run the installation script:
$ rails g react_rails_modal:install
This will place the following in your application.js
:
//= require react_rails_modal
Usage
<ModalComponent
isOpen={bool}
onCloseRequest={requestCloseFunction}
style={customStyle}
>
<h1>Modal Component Content</h1>
<p>Text</p>
</ModalComponent>
Examples
Use styles to style
In app/controller/views/:
<%= react_component('Hello') %>
Styles are passed as an object with 2 keys, 'overlay' and 'modal'.
In app/assets/javascripts/components/:
class Hello extends React.Component {
constructor(props) {
super(props);
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
this.state = { isModalOpen: false };
}
closeModal() {
this.setState({ isModalOpen: false });
}
openModal() {
this.setState({ isModalOpen: true });
}
render () {
return (
<div>
<button onClick={this.openModal}>Open Modal</button>
<ModalComponent
isOpen={this.state.isModalOpen}
onCloseRequest={this.closeModal}
style={Hello.styles}
>
<h1>Hello world!</h1>
<button onClick={this.closeModal}>Close</button>
</ModalComponent>
</div>
);
}
}
Hello.styles = {
overlay: {
backgroundColor: 'rgba(0,0,0,0.75)',
bottom: '0',
height: '100%',
position: 'fixed',
top: '0',
left: '0',
right: '0',
width: '100%',
zIndex: '1',
},
modal: {
background: '#fff',
left: '5%',
padding: '15px 30px',
position: 'relative',
top: '10%',
width: '80%',
zIndex: '2',
}
}
Use css classes to style
If you want to use css classes, you can pass overlayClass and modalClass props to the Modal.
class HelloTwo extends React.Component {
constructor(props) {
super(props);
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
this.state = { isModalOpen: false };
}
closeModal() {
this.setState({ isModalOpen: false });
}
openModal() {
this.setState({ isModalOpen: true });
}
render () {
return (
<div>
<button onClick={this.openModal}>Open Modal</button>
<ModalComponent
isOpen={this.state.isModalOpen}
onCloseRequest={this.closeModal}
overlayClass='overlayClass'
modalClass='modalClass'
>
<h1>Hello world!!</h1>
<button onClick={this.closeModal}>Close</button>
</ModalComponent>
</div>
);
}
}
In app/assets/stylesheets/:
.overlayClass {
background-color: rgba(0,0,0,0.7);
bottom: 0;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1;
}
.modalClass {
background: #fff;
left: 5%;
padding: 15px;
position: fixed;
top: 10%;
width: 90%;
z-index: 2;
}
Development
- Update React assets with
rake react_rails_modal:build
- Run tests with
rake spec