react-deconstruct v1.0.2

A react helper to deconstruct complex logic within a component by splitting up state and functions into different files.

Installation

npm install --save react-deconstruct

API

import { DeconstructState } from 'react-deconstruct';
export default DeconstructState(
StateObject1,
StateObject2,
...
)(Component)

import { DeconstructFunctions } from 'react-deconstruct';
export default DeconstructFunctions(
FunctionObject1,
FunctionObject2,
...
)(Component)

Example Usage

ExampleState.js

const initialState = props => ({
    name: props.first_name + props.last_name,
    role: 'developer'
})
const setName = (state, props) => (param) => ({
    name: param
})

export default {
    initialState,
    setName
}

ExampleFunction.js

const renderName = (props) => (param) => {
    return (<div>{props.name}</div>)
}

export default {
    renderAge,
}

ExampleComponent.js

import { DeconstructState, DeconstructFunctions } from 'react-deconstruct';
import ExampleState from './ExampleState.js';
import ExampleFunction from './ExampleFunction.js';

class Component extends React.Component {
    ...
}

export default DeconstructState(ExampleState)(DeconstructFunction(ExampleFunction)(Component))

Documentation

- DeconstructState

• functions are not allowed to call each other

- DeconstructFunctions

• functions will have access all functions as props