zanettin/incompose

---

zanettin/incompose.json

{
  "createdAt": "2017-02-04T16:08:09Z",
  "defaultBranch": "master",
  "description": "A inferno utility belt for function components and higher-order components",
  "fullName": "zanettin/incompose",
  "homepage": null,
  "language": "JavaScript",
  "name": "incompose",
  "pushedAt": "2019-07-06T14:25:01Z",
  "stargazersCount": 79,
  "topics": [
    "functional-components",
    "functional-programming",
    "higher-order-component",
    "hoc",
    "inferno",
    "inferno-js",
    "javascript",
    "npm",
    "npm-package",
    "recompose"
  ],
  "updatedAt": "2024-11-30T05:48:52Z",
  "url": "https://github.com/zanettin/incompose"
}

Incompose

Incompose is a Inferno.js clone of the famous recompose lib for React.

[]!(LICENSE.md)

Installation

npm install incompose

Incompose / Inferno version map

Incompose works with specific version of inferno. Please make sure you use the correct version.

Inferno verion	Incompose version
v7.x	>= v.5.0.0
v6.x	>= v.4.0.0
v5.x	>= v.3.0.0
v4.x	v.2.0.0
< v4.0	< v.2

Support

Following HoCs are available. If you miss any helper/HoC please send me a note on twitter @roman_zanettin or create an issue / open a PR. Thanks.

Function	since
[branch]!(docs/branch.md)
[componentFromStream]!(docs/componentFromStream.md)
[compose]!(docs/compose.md)
[createEventHandler]!(docs/createEventHandler.md)
[createSink]!(docs/createSink.md)
[defaultProps]!(docs/defaultProps.md)
[flattenProps]!(docs/flattenProps.md)
[mapProps]!(docs/mapProps.md)
[nest]!(docs/nest.md)
[pure]!(docs/pure.md)
[renderComponent]!(docs/renderComponent.md)
[renderNothing]!(docs/renderNothing.md)
[renameProp]!(docs/renameProp.md)
[renameProps]!(docs/renameProps.md)
[setObservableConfig]!(docs/setObservableConfig.md)
[shouldUpdate]!(docs/shouldUpdate.md)
[withHandlers]!(docs/withHandlers.md)
[withLifecycle]!(docs/withLifecycle.md)
[withProps]!(docs/withProps.md)
[withPropsOnChange]!(docs/withPropsOnChange.md)
[withReducer]!(docs/withReducer.md)
[withState]!(docs/withState.md)

Usage

Please find the API and example code in the docs folder.

Import

Incompose provides named and default imports:

import {withState} from 'incompose';
import withState from 'incompose/dist/withState';

Example

import {
  linkEvent
} from 'inferno';

import {
  compose,
  withState,
  shouldUpdate
} from 'incompose';

const inc = (props) => {
  props.setCount(props.count += 1);
};

const dec = (props) => {
  props.setCount(props.count -= 1);
};

const Counter = (props) => (
  <div>
    <h1>count : {props.count}</h1>
    <button onClick={linkEvent(props, dec)}>-</button>
    <button onClick={linkEvent(props, inc)}>+</button>
  </div>
);

/**
 * with state creates 2 new props on the component props
 * props.count    -  contains the value (1 is set as default value)
 * props.setCount  -  contains the setter function
 */
const withCounterState = withState('count', 'setCount', 1);

/**
 * should update prevents the component of re-render (shouldUpdate lifecycle hook)
 * you can compare current and next props and decide whether the component
 * should update or not. In this example, the counter just updates if
 * props.count is even.
 */
const withUpdatePolicy = shouldUpdate((props, nextProps) => (
  nextProps.count % 2 === 0
));

/**
 * with compose all the extended functions are composed BEFORE Counter
 * gets rendered. Please not that order matters.
 */
export default compose(
  withCounterState,
  withUpdatePolicy,
)(Counter);

Thanks

Special thanks to all the contributors and Andrew Clark (@acdlite) for creating this amazing lib for React!

Changelog

Changelog is available [here]!(CHANGELOG.md).