https://github.com/maxnowack/react-tracker-connect
react component decorator to connect reactive data with meteor tracker
https://github.com/maxnowack/react-tracker-connect
meteor react reactivity tracker
Last synced: 2 months ago
JSON representation
react component decorator to connect reactive data with meteor tracker
- Host: GitHub
- URL: https://github.com/maxnowack/react-tracker-connect
- Owner: maxnowack
- License: mit
- Created: 2017-04-10T09:23:48.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-29T15:48:18.000Z (about 6 years ago)
- Last Synced: 2025-02-02T18:15:26.778Z (4 months ago)
- Topics: meteor, react, reactivity, tracker
- Language: JavaScript
- Homepage:
- Size: 176 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: History.md
- License: LICENSE
Awesome Lists containing this project
README
# react-tracker-connect [](https://travis-ci.org/maxnowack/react-tracker-connect)
Performant way to connect reactive data from meteor with react components (see [#13](https://github.com/maxnowack/react-tracker-connect/issues/13))
## Installation
````bash
$ npm install --save react-tracker-connect
````
## Usage
````js
import React, { Component } from 'react'
import connect from 'react-tracker-connect'
import { ReactiveVar } from 'meteor/reactive-var'
const reactiveVar = new ReactiveVar()
// with component classes
@connect((props) => ({
reactive: reactiveVar.get(),
}))
export default class Foo extends Component {
constructor() {
super()
this.state = {}
// …
}
render() {
const { reactive } = this.props
return (
// …
)
}
}
// with stateless components
function Stateless({ reactive }) {
return (
// …
)
}
export default connect((props) => ({
reactive: reactiveVar.get(),
}))(Stateless)
````
### Options
The `connect` decorator takes 2 arguments. The first argument is a function which gets called with the current props object as the first parameter. This function runs reactive, the return value will be merged with the current props and passed to your component.
You can pass `options` via the second argument and the following signature:
````js
{
// Optional. A function of two arguments, called on the old value and the new value whenever a prop was updated.
compare: (a, b) => a === b,
// Optional. An array with the props which will be passed to the reactive function.
// This option can be used to finetune, which props should be checked if they've changed.
allowedProps: ['reactive'],
// Optional, Base component which will be extended.
// Defaults to PureComponent
BaseComponent: React.Component,
}
````
## License
Licensed under MIT license. Copyright (c) 2017 Max Nowack
## Contributions
Contributions are welcome. Please open issues and/or file Pull Requests.
## Maintainers
- Max Nowack ([maxnowack](https://github.com/maxnowack))