React-rails: How do you require react-modal in your app?

[adoseofjess]

Help us help you! Please choose one:

• [ ] My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.
• [ ] My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.
• [ ] I'm trying to use react-rails with another library, but I'm having trouble. I've described my JavaScript management setup (eg, Sprockets, Webpack...), how I'm trying to use this other library, and why it's not working.
• [x ] I have another issue to discuss.

---

This is not an issue, just a question. How would you go about using this https://github.com/reactjs/react-modal in your react-rails app?

[rmosolgo]

I'm using Sprockets, here's how I'd do it:

• Copy the "compiled" file into my app:
  
  
  
  • copy https://github.com/reactjs/react-modal/blob/master/dist/react-modal.js
  
  
  • into /app/assets/javascripts/vendor/react-modal.js
  
  
• Add the version number to the file, for clarity in the future
  
  
  
  • rename to /app/assets/javascripts/vendor/react-modal-v1.0.0.js
  
  
• Require the file in application.js _after_ requiring React:

js //= require react //= require ./vendor/react-modal-v1.0.0

• Use the global ReactModal variable in my code:

js // inside a component definition: render: function() { return ( <div> <ReactModal /> </div> ) }

[scottbarrow]

@rmosolgo would you suggest a way this could be done with a non-compiled library, e.g https://github.com/andreypopp/autobind-decorator

[rmosolgo]

People usually "compile" their compiles-to-JS languages before pushing to NPM, right? So npmcdn might have the compiled version: https://npmcdn.com/[email protected]

The only problem is that it looks like that is made for a NodeJS-like environment, I see that it assumes an object named exports exists.

You could remove those lines to prepare the file for the browser:

// Remove these:
exports['default'] = autobind;
//...
module.exports = exports['default'];

Or, since this package is _meant_ to be used with Babel, maybe babel will take care of it?

[rmosolgo]

React-rails 2.0.0 will support https://github.com/rails/webpacker which brings nodejs build processes to Rails!