How to call react-modal from rails-assets.org in react-rails component

Question

I have a rails app that uses react on the front end but I'm having trouble adding other react modules to my components. I am using react-rails for incorporating react into my rails app. I would like to add react-modal to a component. I've used rails-assets to add react-modal as a gem but I'm having trouble calling react-modal in my component. I was hoping it would be a similiar call as React.DOM but that hasn't seemed to be the case.

I can't use the normal 'require()' syntax due to sprockets and I would like to stick with rails-assets rather than browserify/webpack solutions.

So just to be clear I want to display the modal in my component and as of now I get an error returned that says 'Modal is not defined'. Thanks for any help.

This is the rails-assets sourced gem:

### Rails Assets Gems
source 'https://rails-assets.org' do
  gem 'rails-assets-react-modal'
end

Application.js

//= require react
//= require react_ujs
//= require react-modal
//= require components

This is my component:

customStyles = content:
  top: '50%'
  left: '50%'
  right: 'auto'
  bottom: 'auto'
  marginRight: '-50%'
  transform: 'translate(-50%, -50%)'

DOM = React.DOM
@EntityBulkTracker = React.createClass
  displayName: 'EntityBulkTracker'

  getInitialState: ->
    entity: @props.entity
    modalIsOpen: true

  openModal: (e) ->
    @setState modalIsOpen: true

  closeModal: (e) ->
    @setState modalIsOpen: false

  render: ->
    DOM.div null,
      Modal
        isOpen: @state.modalIsOpen
        onRequestClose: @closeModal
        style: "#{customStyles}"

        DOM.h2 null,
          "Hello"
        DOM.input
          type: 'button'
          onClick: @closeModal
        DOM.div null,
          "I am a modal"

Answer 1

When you require a component using sprockets It will be available as a global object, the component will have the same name of the package, e.g:

If you're using react-modal-bootstrap

//= require react-modal-bootstrap

The component available will be:

<ReactModalBoostrap.Modal />

It should work the same for the modal you're using, so instead of using <Modal /> you should be using <ReactModal.Modal />

Also remember to restart your server after you run bundle install

Answer 2

Typically when I use React with Rails, I'll follow this sort of pattern:

In my application.html.erb

    <div id="react-app"> </div>

    <div class="main-content">
      <%= yield %>
       <%= javascript_include_tag 'bundle' %>
    </div>

That one <div> will be what I append my entire React App to. Since Rails views often have different routes, I'll handle the routing in my app.js with something like this, only rendering what I need when I need it:

      _renderSpecificComponents () {
        return (
          window.location.pathname === '/users/sign_in' ? (
            <Login />
          ) : (
            <Header />
          )
        );

If you don't want to follow a pattern like this, one suggestion I would have is to make sure you're requiring in the Modal into your specific component and not just App.js.