Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicolaslopezj/react-meteor-data
Fetch Meteor data in React using decorators
https://github.com/nicolaslopezj/react-meteor-data
Last synced: 17 days ago
JSON representation
Fetch Meteor data in React using decorators
- Host: GitHub
- URL: https://github.com/nicolaslopezj/react-meteor-data
- Owner: nicolaslopezj
- Created: 2016-08-30T11:50:33.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-05T15:14:32.000Z (over 7 years ago)
- Last Synced: 2024-10-03T08:54:53.514Z (about 1 month ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 38
- Watchers: 13
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-star - react-meteor-data
README
# React Meteor Data
Fetch Meteor data in React using decorators
Medium Post
- [Using decorators to fetch Meteor data in React](https://medium.com/orionsoft/using-decorators-to-fetch-meteor-data-in-react-419a6869400c)
- [Using Meteor methods on React components to fetch data](https://medium.com/orionsoft/using-meteor-methods-on-react-components-to-fetch-data-8f98431a6252)
### Installing
Install the package
```
meteor add orionsoft:react-meteor-data
```
Install the babel decorator
```
npm install --save-dev babel-plugin-transform-decorators-legacy
```
Create or update the ```.babelrc``` file in the root of your app
```js
{
"plugins": [
"babel-plugin-transform-decorators-legacy"
]
}
```
### Example with publication
```js
import React from 'react'
import {Meteor} from 'meteor/meteor'
import {withData} from 'meteor/orionsoft:react-meteor-data'
import MyCollection from './my-collection'
/**
* Prop will be checked also in the container
*/
const propTypes = {
itemId: React.PropTypes.string.isRequired,
isLoading: React.PropTypes.bool,
item: React.PropTypes.string
}
@withData(({itemId}) => {
const handler = Meteor.subscribe('myPublication', itemId)
const isLoading = !handler.ready()
const item = MyCollection.findOne(itemId)
return {isLoading, item}
})
export default class Component extends React.Component {
render () {
if (this.props.isLoading) return
return (
{this.props.item.name}
)
}
}
Component.propTypes = propTypes
```
### Example with method
```js
import React from 'react'
import {Meteor} from 'meteor/meteor'
import {withMethodData} from 'meteor/orionsoft:react-meteor-data'
/**
* Prop will be checked also in the container
*/
const propTypes = {
itemId: React.PropTypes.string.isRequired,
isLoading: React.PropTypes.bool,
item: React.PropTypes.string
}
@withMethodData(({itemId}, ready) => {
Meteor.call('getItem', itemId, ready)
})
export default class Component extends React.Component {
render () {
if (this.props.isLoading) return
return (
{this.props.item.name}
)
}
}
Component.propTypes = propTypes
// On the server
Meteor.methods({
'getItem': function (itemId) {
const item = Items.findOne(itemId)
return {item} // objects returned in the method will be passed as props
}
})
```