react-meteor-data

Meteor packages for a great React developer experience

Usage no npm install needed!

<script type="module">
  import reactMeteorData from 'https://cdn.skypack.dev/react-meteor-data';
</script>

README

This is not the official react-meteor-data package!

The official Atmosphere package is at https://github.com/meteor/react-packages/tree/devel/packages/react-meteor-data. This is an unofficial npm package version of it.

react-meteor-data

This package provides an integration between React and tracker, Meteor's reactive data system.

Install

To install the package, use meteor add:

meteor add react-meteor-data

You'll also need to install react and react-addons-pure-render-mixin if you have not already:

npm install --save react react-addons-pure-render-mixin

Usage

This package exports a symbol createContainer, which you can use to create a Higher Order Container to wrap your data using container.

import { createContainer } from 'meteor/react-meteor-data';

export default FooContainer = createContainer(() => {
  // Do all your reactive data access in this method.
  // Note that this subscription will get cleaned up when your component is unmounted
  var handle = Meteor.subscribe("todoList", this.props.id);

  return {
    currentUser: Meteor.user(),
    listLoading: ! handle.ready(),
    tasks: Tasks.find({listId: this.props.id}).fetch(),
  };
}, Foo);

The first argument to createContainer is a reactive function that will get re-run whenever its reactive inputs change.

The returned component will, when rendered, render the second argument (the "lower-order" component) with its provided props in addition to the result of the reactive function. So Foo will receive FooContainer's props as well as {currentUser, listLoading, tasks}.

For more information, see the React article in the Meteor Guide.