Skip to content

A inferno utility belt for function components and higher-order components

License

Notifications You must be signed in to change notification settings

zanettin/incompose

Repository files navigation

Inferno JS Logo

Incompose

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

Build Status npm version npm downloads Code Climate Test Coverage MIT

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 0.0.8
componentFromStream 1.1.0
compose 0.0.3
createEventHandler 1.1.0
createSink 0.0.6
defaultProps 0.0.3
flattenProps 0.0.4
mapProps 3.0.1
nest 0.0.7
pure 0.0.8
renderComponent 0.0.8
renderNothing 0.0.5
renameProp 0.0.4
renameProps 0.0.4
setObservableConfig 1.1.0
shouldUpdate 0.0.3
withHandlers 0.0.5
withLifecycle 0.0.3
withProps 0.0.3
withPropsOnChange 0.0.6
withReducer 0.0.7
withState 0.0.3

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.