Skip to content

'Higher Order Component' that controls the props of a wrapped component via stores.

Notifications You must be signed in to change notification settings

altjs/connect-to-stores

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e0bcb94 · Jul 15, 2015

History

4 Commits
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015
Jul 15, 2015

Repository files navigation

connectToStores (for alt)

'Higher Order Component' for alt flux that controls the props of a wrapped component via stores.

Alt is an Isomorphic flux implementation.

Check out the API Reference for full in-depth alt docs. For a high-level walk-through on flux, take a look at the Getting Started guide.

Gitter

// @todo Use real badges for this package.
/*
[![NPM version](https://badge.fury.io/js/alt.svg)](http://badge.fury.io/js/alt)
[![Build Status](https://secure.travis-ci.org/goatslacker/alt.svg?branch=master)](http://travis-ci.org/goatslacker/alt)
[![Coverage Status](https://img.shields.io/coveralls/goatslacker/alt.svg?style=flat)](https://coveralls.io/r/goatslacker/alt)
[![Dependency Status](https://david-dm.org/goatslacker/alt.svg)](https://david-dm.org/goatslacker/alt)
[![Download Count](https://img.shields.io/npm/dm/alt.svg?style=flat)](https://www.npmjs.com/package/alt)
[![JS.ORG](https://img.shields.io/badge/js.org-alt-ffb400.svg?style=flat-square)](http://js.org)
*/

How to use

Expects the Component to have two static methods:

  • getStores(): Should return an array of stores.
  • getPropsFromStores(props): Should return the props from the stores.

Using old React.createClass() style:

const MyComponent = React.createClass({
  statics: {
    getStores(props) {
      return [myStore]
    },
    getPropsFromStores(props) {
      return myStore.getState()
    }
  },
  render() {
    // Use this.props like normal ...
  }
})
MyComponent = connectToStores(MyComponent)

Using ES6 Class:

class MyComponent extends React.Component {
  static getStores(props) {
    return [myStore]
  }
  static getPropsFromStores(props) {
    return myStore.getState()
  }
  render() {
    // Use this.props like normal ...
  }
}
MyComponent = connectToStores(MyComponent)

Using ES7 Decorators (proposal, stage 0):

@connectToStores
class MyComponent extends React.Component {
  static getStores(props) {
    return [myStore]
  }
  static getPropsFromStores(props) {
    return myStore.getState()
  }
  render() {
    // Use this.props like normal ...
  }
}

A great explanation of the merits of higher order components can be found at http://bit.ly/1abPkrP

License

MIT

About

'Higher Order Component' that controls the props of a wrapped component via stores.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published