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:

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

• Use the global ReactModal variable in my code:

  // 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/autobind-decorator@1.3.3

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!