Code Monkey home page Code Monkey logo

sententiaregum-flux-react's Introduction

React.js bridge for flux-container

Build Status NPM Version Build status

This package simplifies the state refresh of a store and the re-rendering of the connected views.

Install

You can install this package by typing:

npm install sententiaregum-react-flux --save

The package requires at least Node 6.x and NPM 3 is recommended.

Docs

The usage is quite simple: you simply have to "tell" the component which stores to subscribe:

import React, { Component } from 'react';
import { subscribeStores } from 'sententiaregum-flux-react';
import postStore from '../stores/postStore';

const component = props => {
  return (
    <div>
      <h1>{props.header}</h1>
      <p>
        <div style={props.style}>{props.text}</div>
        <ul>
          {props.textItems.map(item => <li>{item}</li>}
        </ul>
      </p>
    </div>
  );
};

export default subscribeStores(component, {
  header:    [postStore, 'texts.header'],
  text:      [postStore, 'texts.info'],
  textItems: [postStore, 'textItems']
});

So each item of the props object needs a definition which is an array. The first array element defines the store where the information should be taken from, the second item is a property path that needs to be evaluated by the store in order to find the value.

Contributing

Further information about contributing can be found in the CONTRIBUTING.md

License

Please review the LICENSE file that was distributed with this source code.

v1.0

v1.0 contained an approach which relied on inheritance. Although it worked quite well, it had the huge downside that no functional/pure components could be used and it was a bit more complicated as it dug into the prototype of the class.

v1.0 is also supported and can be found at the v1.0.x branch.

sententiaregum-flux-react's People

Contributors

ma27 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.