Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including reflux-hoc with all npm packages installed. Try it out:

var refluxHoc = require("reflux-hoc")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

reflux-hoc v1.0.2

HOC for reflux


Travis David npm

Higher order component for [reflux][r]


$ npm install --save reflux-hoc


passing the data as props

You can directly get the data from a stores as props with connectToData.

import { connectToData } from 'reflux-hoc';

  { users: UserStore } // the store you want to connect to.
, (props, actionData) => ({ users: users.getUsers() }) // this function is call for the initialState and if the store changes.
, function({ users }) { // the users are passed down as a prop
    return (
        { => <li>{}</li>)}

with a onChange callback on the component

:exclamation: This uses calls the provided onChange function on the child component. If you use more then one HOC, make sure connect` is applied directly to the component. :exclamation:

import connect from 'reflux-hoc';

const Component = React.createClass({
  onStoreChange () {
    // called on change

  render () { return <h1>Fire</h1> }

const ConnectedComponent = connect(Store, 'onStoreChange', Component);



// connectToData :: { b: Store } -> ({ a: * }) -> Component -> Component connectToData({ PersonStore, PostStore }, (props, actionData) => ( { persons: PersonStore.getPersons(), posts: PostStore.getPosts() } ), Component);

### connect

// connect :: Store -> String -> Component -> Component
connect(Store, CallbackName, Component);

// connect :: [Store] -> String -> Component -> Component
connect([Store1, Store2], CallbackName, Component);

// or
const connectToStores = connect([Store1, Store2]);

connectToStores('onStoresChange', Compnent);

## License

MIT © [Christoph Hermann](



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free