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 npm install or yarn add:

npm install --save react-meteor-data-with-tracker

or

yarn add react-meteor-data-with-tracker

You'll also need to install react if you have not already:

npm install --save react

or

yarn add --save react

Usage

Important note (unofficial version): With this unofficial package you will have to import "react-meteor-data-with-tracker" instead of "meteor/react-meteor-data".

This package exports a symbol withTracker, which you can use to wrap your components with data returned from Tracker reactive functions.

import { withTracker } from 'react-meteor-data-with-tracker';

// React component
function Foo({ currentUser, listLoading, tasks }) {
  // ...
}

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

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

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

The returned component will, when rendered, render Foo (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.

Note on withTracker and createContainer

The new withTracker function replaces createContainer (however it remains for backwards compatibility). For createContainer usage, please see prior documentation. The purpose of the new function is to better allow for container composability. For example when combining Meteor data with Redux and GraphQL:

const FooWithAllTheThings = compose(
  connect(...), // some Redux
  graphql(...), // some GraphQL
  withTracker(...), // some Tracker data
)(Foo);