react-pocket
A react developing pattern within querying ability
Last updated 2 years ago by captainwz .
MIT · Original npm · Tarball · package.json
$ cnpm install react-pocket 
SYNC missed versions from official npm registry.

react-pocket

npm version

A framework that helps you do state-management in React without redux or mobx. Light, simple and easy. Just write some intimate jquery-style codes like $('MyComponent').setProp({foo: 'bar'}) anywhere. That's enough!

Installation

npm install --save react-pocket

Quick Look

Let's take an example. There are three component files Card.js,Timer.js,Counter.js, which are aggregated to simply play a feature of counting. The following is the structure.

-- Card
    |
     -- Timer
          |
           -- Counter

What if you want to change the number of Counter just in Card.js. react-pocket offers you ability to do so! Here are the code examples.

/*Card.js*/

import $ from 'react-pocket';
import Timer from './Timer';

export default class Card extends $ {

    componentDidMount () {

        setInterval(() => {
            
            let num = parseInt($('Counter').getPro('num')) + 1;

            $('Counter').setProp({num});

        }, 1000);

    }

    return (
        <div>
            <Time/>
        </div>
    )
}

/*Timer.js*/

import $ from 'react-pocket';
import Counter from './Counter';

export default class Timer extends $ {

    return (
        <div>
            <Counter/>
        </div>
    )
}
/*Counter.js*/

import $ from 'react-pocket';
export default class Counter extends $ {
    
    constructor (props) {
        super(props);
    }

    defaultProp () {
        
        return {
            num: 0
        }
    
    }

    render () {

        return (
            <h3>
                {this.props.num}
            </h3>
        )

    }


}

You can get the full example here.

gif

License

MIT

Current Tags

  • 0.1.6                                ...           latest (2 years ago)

3 Versions

  • 0.1.6                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (8)
Dev Dependencies (13)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |