npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

refluxed

1.0.2 • Public • Published

refluxed

Connecting React Components with Reflux Stores in a clean way

Installation

$ npm install --save refluxed

Usage

You'll write your component to receive all its data as props – most likely you can write it as a stateless component:

function UserList({ users, header }) {
  return (
    <div>
      <h1>{ header }</h1>
      <ul>
        { users.map(u => <li>{u.name}</li>) }
      </ul>
    <div>
  );
}

Then, before using your component on your app, you use the Refluxed method to wrap your component into another (the High-Order Component), which will then listen to the stores you need and pass on their data as props:

import Refluxed from 'refluxed';
 
const ConnectedUserList = Refluxed(UserList, { users: UserStore });
 
function MyApp() {
  render (
    <div>
      <h1>Welcome</h1>
      <p>Welcome to our app</p>
      <ConnectedUserList header="User List" />
    </div>
  );
}

Inspiration

This project is inspired by the great reflux-hoc from Christoph Hermann.

License

MIT © Elementar Sistemas

install

npm i refluxed

Downloadsweekly downloads

27

version

1.0.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability