26

Is it possible to create an embeddable JavaScript widget using the React JavaScript library, where:

  1. the React library is "embedded" within the widget
  2. the version of the embedded React library can be different from the React library on the page loading the widget, like can be done with jQuery.

I'm lookin for functionality as described in:

Grokify
  • 15,092
  • 6
  • 60
  • 81
Serge van den Oever
  • 4,340
  • 8
  • 45
  • 66

1 Answers1

20

For the requirements you mentioned, the best solution is browserify (or similar). Using reactify transform you can have the JSX to JS happen all in one step. Browserify (and Webpack) are very common the react community, so nearly all libraries are published to npm for easy consumption.

Browserify packs your JavaScript, your React version of choice, and any libraries into a single JS file which doesn't use globals or other patterns that conflict with other code running on the page.

You can also look into some libs like react-css to isolate your styles from the page styles. The styles will also be isolated in your bundle. Of course if the page does something like div {margin: 1em}, the only solutions are iframes or web-components.

Brigand
  • 84,529
  • 20
  • 165
  • 173
  • Sounds like you handed me all the ingredients I need to get the thing rolling! With respect to styling I'm planning to use [cleanslate](https://github.com/premasagar/cleanslate), which describes itself as: _An extreme CSS reset stylesheet, for aggressively resetting the styling of an element and its children. Composed exclusively of CSS !important rules._ – Serge van den Oever Aug 22 '14 at 20:28
  • 1
    @SergevandenOever if you want styles that are scoped by individual components, React inline styles are a built-in feature that do what you're looking for: http://facebook.github.io/react/tips/inline-styles.html . See these slides for justification: https://speakerdeck.com/vjeux/react-css-in-js. Not sure I agree, but those are some interesting ideas! And less ugly than adding !important to everything like in cleanslate. – Max Heiber Mar 14 '15 at 18:29
  • 1
    Heads up that https://github.com/andreypopp/reactify has been superseded by https://github.com/babel/babelify – Aaron Jun 01 '17 at 19:28