Noux

📦 A component container for React.JS

Install

npm i noux --save

About

Noux is a stupidly written component container rather than a state container. Because it stores the whole "this" (stupid idea, right?). Noux uses Pub/Sub pattern (PubSubJS). It is not a replacement for Redux like advanced libraries. Please be aware that this is not a production ready library.

Check the live demo.

Usage

Declaring Noux

Import and declare Noux in your main component.

import noux from 'noux';

class Main extends Component {
    constructor() {
        super();
        this.noux = new noux({
            log: false // Optional [default: true]
        });
    }
}

Initialization in a sub component

Initialize Noux in every new component.

class SubComponent extends Component {
    constructor(props) {
        super();
        this.noux = props.noux;
        this.noux.init({
            name: 'SubComponent',
            self: this
        });
    }
}

Passing Noux as props

Pass Noux into new components as props.

<SubComponent noux={this.noux}/>

Methods

init()

To initialize Noux you have to call "noux.init" function. You can use this in any component.

this.noux.init({
    name: '<current_component_name>',
    self: this
});

state()

Get the value of a specific state from the component.

Single state:

this.noux.state({
    target: "<component_name>",
    state: "<state_name>"
})

Multiple states:

this.noux.state({
    target: "<component_name>",
    state: ["<state_one>", "<state_two>", "<state_three>"]
})

setState()

Set the value of a specific state from the component.

this.noux.setState({
    target: "<component_name>",
    state: "<state_name>",
    value: "<state_value>"
});

all()

Get the all connected components and states as object.

this.noux.all()

revoke()

Remove the connected component from Noux.

this.noux.revoke({
    target: "<component_name>"
})

Contributing

• Fork the project.
• Make your feature addition or bug fix.
• Send me a pull request.

Developed by @rufatmammadli