Documentation request: Third Party Component Use

[ciwolsey]

Would it be possible for you to add some documentation how we can go about using third party components from somewhere like: http://react-components.com/ ?

While this is explained in the react documentation I'm not sure how/if it applies to react and meteor.

[sunspots]

Just make a container component than handles binding to Meteor, then passes data down as props? https://medium.com/@learnreact/container-components-c0e67432e005

[dearlordylord]

@ciwolsey third-party components are rather painful to use as they require() on client side mostly, and I didn't found a good way to set up browserify or webpack with Meteor yet. It is still possible though if you wrap them in React components. Take my component as a reference https://github.com/Firfi/meteor-griddle-react. Way I'm doing it is terrible as it is copy-pasting built component into package code. It is still better than copying it into your application code as it doesn't clutter your version system. I will investigate this matter later and possibly will publish better solution somewhere, for now you can do as I did it.

[ciwolsey]

@firfi That would be great. As a newbie to react I've never used it outside of Meteor. I've been using browserify to create js and then just using it under /client/ and it seems to work from what I can tell.. but stuff like css has to be copied across manually too. Seems less than ideal. Trying out a lot of components is tedious and as a beginner that's something I'm sure to be doing.

[dearlordylord]

So far it seems that copying build is a Meteor way. Css files can be added from package too like it done here https://github.com/twbs/bootstrap/blob/master/package.js

[dcsan]

the require issue i'd like to understand better. For example using an extension:

var Animation       = require('react-magician');

which ends with

module.exports = Animation;

Are these components using AMD or some other format?

I know that when trying the famo.us library, the famono package was built that dealt with all these library/module formats, and was very complex.

[giantelk]

React-Meteor doesn't need require() statements, it uses Meteor's build system.

[tacone]

I'm very interested in this, also. Wrapping into a package every single third party add-on you need to use is very painful. You pretty much end up to face the choice to give up onto meteor or react.

[dcsan]

React-Meteor doesn't need require() statements, it uses Meteor's build system.

so that means we just drop the raw plugins from external sources somewhere into the meteor project, and they'll be available? for example the react-magician package I referenced above has a package.json.

{
  "name": "react-magician",
  "version": "0.0.3",
  "description": "Animation library for React",
  "main": "lib/index.js",
  "keywords":[
    "react",
    "reactjs",
    "animation",
    "tweening",
    "transition",
    "multiple",
    "timeline"
  ],
  "dependencies": {
    "gravitas": "git+https://github.com/SanderSpies/gravitas.js.git"
  },
  "peerDependencies": {
    "react": "^0.13.0"
  }
}

so based on: "main": "lib/index.js",

i should pluck just that file, and stick in a meteor lib/ dir somewhere. then if i hunt down the dependencies (and their depenencies etc) and drop the raw files into meteor client side somewhere, things should resolve?

the module.exports = Animation is going to throw an error for a start, it looks like since nothing in meteor defines that. perhaps if its within a package there is an equivalent wrapper? at least in the console I get:

> module.exports = "blah"
VM27210:2 Uncaught ReferenceError: module is not defined

so not sure it's just a case of dropping things in, the original source looks like will need editing at least.

[jedwards1211]

@ciwolsey Using Webpack with Meteor is surprisingly easy, all you have to do is make Webpack output its JS bundles into a client folder, then Meteor will automatically incorporate those bundles into what it serves to the browser. I put my Webpack code in a .client folder so it gets ignored by meteor, and only its output gets consumed. I like getting to use require() way better than the meteor alternatives