Package with react component wrapper for combining React with mobservable. Exports the observer decorator and some development utilities. For documentation, see the mobservable project. This package supports both React and React-Native.

npm install mobservable-react --save

import {observer} from 'mobservable-react';
// - or -
import {observer} from 'mobservable-react/native';

This package provides the bindings for Mobservable and React. See the official documentation for how to get started.

• Minimal Mobservable, React, ES6, JSX, Hot reloading: Mobservable-React-Boilerplate
• TodoMVC Mobservable, React, ES6, JSX, Hot reloading: Mobservable-React-TodoMVC
• Minimal Mobservable, React, Typescript, TSX: Mobservable-React-Typescript
• Minimal Mobservable, React, ES6(babel), JSPM with hot reloading modules: jspm-react

Function (and decorator) that converts a React component definition, React component class or stand-alone render function into a reactive component. See the mobservable documentation for more details.

Enables the tracking from components. Each rendered reactive component will be added to the componentByNodeRegistery and its renderings will be reported through the renderReporter event emitter.

Event emitter that reports render timings and component destructions. Only available after invoking trackComponents(). New listeners can be added through renderReporter.on(function(data) { /* */ }).

Data will have one of the following formats:

{
    event: 'render',
    renderTime: /* time spend in the .render function of a component, in ms. */,
    totalTime: /* time between starting a .render and flushing the changes to the DOM, in ms. */,
    component: /* component instance */,
    node: /* DOM node */
}

{
    event: 'destroy',
    component: /* component instance */,
    node: /* DOM Node */
}

WeakMap. It's get function returns the associated reactive component of the given node. The node needs to be precisely the root node of the component. This map is only available after invoking trackComponents.

Fixed #12: fixed React warning when a component was unmounted after scheduling a re-render but before executing it.

Upped dependency of mobservable to 1.1.1.

It is now possible to define propTypes and getDefaultProps on a stateless component:

const myComponent = (props) => {
    // render
};

myComponent.propTypes = {
    name: React.PropTypes.string
};

myComponent.defaultProps = {
    name: "World"
};

export default observer(myComponent);

All credits to Jiri Spac for this contribution!

Use React 0.14 instead of React 0.13. For React 0.13, use version [email protected] or higher.

Minor fixes and improvements

Fixed issue with typescript typings. An example project with Mobservable, React, Typescript, TSX can be found here: https://github.com/mweststrate/mobservable-react-typescript

reactiveComponent has been renamed to observer

Added separte import for react-native: use var reactiveComponent = require('mobservable-react/native').reactiveComponent for native support; webpack clients will refuse to build otherwise.

Added react-native as dependency, so that the package works with either react or react-native.

Upgraded to Mobservable 0.7.0

Fixed issue where Babel generated component classes where not properly picked up.

observer now accepts a pure render function as argument, besides constructor function. For example:

var TodoItem = observer(function TodoItem(props) {
    var todo = props.todo;
    return <li>{todo.task}</li>;
});

observer is now defined in terms of side effects.

Added support for React 0.14(RC) by dropping peer dependency