tracker-react

by ultimatejs

ultimatejs / tracker-react

No-Config reactive React Components with Meteor

128 Stars 11 Forks Last release: Not found 65 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

image 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

trackerreact-demo

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) =&gt; {
                      return <task key="{task._id}" task="{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]
```jsx 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 (

Todo List - {Session.get('title')}

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

}

}); ```

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.