ravishing/react-pocket

A framework that enables you to use intimate jquery-style APIs in React instead of using redux. Light, simple and easy🍹

react-pocket

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

• Why
• Usage
• API

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').getProp('num')) + 1;

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

        }, 1000);

    }

    return (
        <div>
            <Timer/>
        </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.

License

MIT