README.md

Current Version: 1.0.5

Meteor 1.3

meteor add ultimatejs:tracker-react

Meteor 1.2

meteor add ultimatejs:[email protected]

TrackerReact is an upgrade to what ReactMeteorData offers. Using TrackerReact instead you are no longer required to "freeze" all your reactivity in a single method. Any reactive data sources (e.g: collection.find() or Session.get('foo')) used in your render method or by methods called by your render method are automatically reactive! This replicates the standard helper experience from Meteor/Blaze. Enjoy!

GOTCHA: You must call .fetch() on your cursors to trigger reactivity!!

Usage

From Meteor v.1.3 and up, react components can be made reactive either by using TrackerReact in a Composition (inheritance), as Mixin or as Decorator.

Example-App

Clone & Read the Source: https://github.com/D1no/TrackerReact-Example

Profiling

Currently only under the profiler Branch and will be added with the final release of Meteor 1.3 Use the profiler argument TrackerReact(React.Component, {profiler: true}) to see render times of a reactive components. Or set this._profMode = {profiler: true} within the constructor() function.

Implementation

Composition (wrapping a relevant React.Component in TrackerReact) is a clean, default alternative until Meteor supports decorators.

import React from 'react';
import ReactDOM from 'react-dom';

// TrackerReact is imported (default) with Meteor 1.3 new module system
import TrackerReact from 'meteor/ultimatejs:tracker-react';

// Get the Collection
Tasks = new Mongo.Collection("tasks");

// > React.Component is simply wrapped with TrackerReact
class App extends TrackerReact(React.Component) {

	// Note: In ES6, constructor() === componentWillMount() in React ES5
	constructor() {
		super();
		this.state = {
          subscription: {
            tasks: Meteor.subscribe('tasks')
          }
        }
	}
	
	componentWillUnmount() {
		this.state.subscription.tasks.stop();
	}
	
	//tracker-based reactivity in action, no need for `getMeteorData`!
	tasks() {
	    return Tasks.find({}).fetch(); //fetch must be called to trigger reactivity
	},
	

	render() {
		return (
			<div className="container">
				<h1>
					Todo List - {Session.get('title')}
				</h1>

				<ul>
				  	{this.tasks().map((task) => {
						  return <Task key={task._id} task={task} />;
					  })}
				</ul>
			</div>
		);
	}
});

Same is possible as Mixin (ES6 example)

import React from 'react';
import ReactDOM from 'react-dom';

// Use ReactMixin from npm
import ReactMixin from 'react-mixin';

// > Make sure to import the TrackerReactMixin export
import {TrackerReactMixin} from 'meteor/ultimatejs:tracker-react';

// Get the Collection
Tasks = new Mongo.Collection("tasks");

class App extends React.Component {

	// (...)

});
// > Using ReactMixin 
ReactMixin(App.prototype, TrackerReactMixin);

Same example as Decorator (ES6/ES7 Example). Cleanest solution: Requires support for decorators either setting babel to experimental or TypeScript with experimental ES7 features turned on.

import React from 'react';
import ReactDOM from 'react-dom';

// > Make sure to import the TrackerReactMixin export
import {TrackerReactMixin} from 'meteor/ultimatejs:tracker-react';

// Get the Collection
Tasks = new Mongo.Collection("tasks");

// > Assign as Decorator
@TrackerReactMixin
class App extends React.Component {

	// (...)

Old Example: Meteor 1.2

Package version: ultimatejs:[email protected]

App = React.createClass({
	mixins: [TrackerReact],

	//tracker-based reactivity in action, no need for `getMeteorData`!
	tasks() {
	    return Tasks.find({}).fetch(); //fetch must be called to trigger reactivity
	},
	

	render() {
		return (
			<div className="container">
				<h1>
					Todo List - {Session.get('title')}
				</h1>

				<ul>
				  	{this.tasks().map((task) => {
						  return <Task key={task._id} task={task} />;
					  })}
				</ul>
			</div>
		);
	}
});