Using an external React component on Rails application

Question

I am trying to use the rc-slider React component on a existing Rails application that is using react-rails gem and it already have some other components that were built within the application that work just fine.

Based on this blog post I've been able to follow its first 3 steps, I've found the minified and browser-ready version of it here, added the file to the suggested path and required it on the application.js as recommended but even seeing the code within the Sprockets generated application javascript file that is rendered on the browser I can't see or use the supposed global variable it would provide according to step 4.

In the component's examples page it uses a const Slider = require('rc-slider'); statement in order to get that available. I've tried that but without luck as it throws: Uncaught ReferenceError: require is not defined. The same happens when I try the README usage's section approach: import Slider, { Range } from 'rc-slider';. I've tried both from an existing JS where I load other React components and also from the browser's Dev Tools Console window.

Am I using the wrong approach to the problem or maybe missing/overseeing any concept or basics here?

rmosolgo · Accepted Answer · 2017-02-01 18:33:58Z

2

If you want to use Sprockets, you can get a pre-compiled version of rc-slider from unpkg:

https://unpkg.com/[email protected]/dist/rc-slider.js

Taking a look at the source, I see it exports the library as rc-slider:

So you can access it as window["rc-slider"] and use it from there, for example:

var RCSlider = window["rc-slider"]

var container = document.getElementById("container")

ReactDOM.render(
  <div>
    <RCSlider />
    <RCSlider.Range />
  </div>,
  container
);

jsfiddle

That way, if you put rc-slider.js in the asset pipeline, you can use RCSlider in your javascripts.

answered Feb 1, 2017 at 18:33

rmosolgo

1,8841 gold badge19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using an external React component on Rails application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related