Incompose

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

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
componentFromStream
compose
createEventHandler
createSink
defaultProps
flattenProps
mapProps
nest
pure
renderComponent
renderNothing
renameProp
renameProps
setObservableConfig
shouldUpdate
withHandlers
withLifecycle
withProps
withPropsOnChange
withReducer
withState

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.