JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
docs
src
tests
.babelrc
.editorconfig
.eslintrc
.gitignore
.nvmrc
.prettierrc
CHANGELOG.md
LICENSE.md
README.md
cSpell.json
codeclimate.yml
package.json
yarn.lock

README.md

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
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
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.