Meteor Reactivity for your React application :).
The purpose of this library is :
npm i --save react-web-meteor
import React, { Component } from 'react';
import Meteor, { createContainer } from 'react-web-meteor';
Meteor.connect('ws://192.168.X.X:3000/websocket');//do this only once
class Todo extends Component {
renderRow(todo) {
return (
<span>{todo.title}</span>
);
}
render() {
const { settings, todosReady, todos } = this.props;
return(
<div>
<div>{settings.title}</div>
{!todosReady && <span>Not ready</span>}
<div>{todos.map(v=>this.renderRow(v))}</div>
</div>
)
}
}
export default createContainer(params=>{
const handle = Meteor.subscribe('todos');
Meteor.subscribe('settings');
return {
todosReady: handle.ready(),
settings: Meteor.collection('settings').findOne()
};
}, Todo)
Since Meteor 1.3, createContainer is the recommended way to populate your React Components.
Very similar to getMeteorData but your separate container components from presentational components.
import Meteor, { createContainer } from 'react-web-meteor';
class Orders extends Component {
render() {
const { pendingOrders } = this.props;
//...
);
}
}
export default createContainer(params=>{
return {
pendingOrders: Meteor.collection('orders').find({status: "pending"}),
};
}, Orders)
These variables can be used inside getMeteorData or createContainer. They will be populated into your component if they change.
These methods (except update) work offline. That means that elements are correctly updated offline, and when you reconnect to ddp, Meteor calls are taken care of.
Meteor.subscribe() returns an handle. If the component which called subscribe is unmounted, the subscription is automatically canceled.
You need pass the cursoredFind
option when you get your collection if you want to use cursor-like method:
Meteor.collection("collectionName", { cursoredFind: true })
Or you can simply use find()
to get an array of documents. The option default to false for backward compatibility. Cursor methods are available to share code more easily between a react app and a standard Meteor app.
Connect to a DDP server. You only have to do this once in your app.
Arguments
url
string requiredoptions
object Available options are :
Disconnect from the DDP server.
Example `import { composeWithTracker } from 'react-web-meteor';``
See documentation.
`import { Accounts } from 'react-web-meteor';``
Once connected to the ddp server, you can access every method available in ddp.js.
Pull Requests and issues reported are welcome! :)