https://github.com/zanettin/incompose
A inferno utility belt for function components and higher-order components
https://github.com/zanettin/incompose
functional-components functional-programming higher-order-component hoc inferno inferno-js javascript npm npm-package recompose
Last synced: 3 months ago
JSON representation
A inferno utility belt for function components and higher-order components
- Host: GitHub
- URL: https://github.com/zanettin/incompose
- Owner: zanettin
- License: mit
- Created: 2017-02-04T16:08:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-07-06T14:25:01.000Z (over 6 years ago)
- Last Synced: 2024-11-14T10:44:41.336Z (11 months ago)
- Topics: functional-components, functional-programming, higher-order-component, hoc, inferno, inferno-js, javascript, npm, npm-package, recompose
- Language: JavaScript
- Size: 441 KB
- Stars: 78
- Watchers: 4
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Incompose
Incompose is a [Inferno.js](https://infernojs.org/) clone of the famous [recompose](https://github.com/acdlite/recompose) lib for React.
[](https://semaphoreci.com/open-source/incompose)
[](https://www.npmjs.com/package/incompose)
[](https://www.npmjs.com/package/incompose)
[](https://codeclimate.com/github/zanettin/incompose)
[](https://codeclimate.com/github/zanettin/incompose/coverage)
[](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](https://twitter.com/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:
```javascript
import {withState} from 'incompose';
import withState from 'incompose/dist/withState';
```
### Example
```javascript
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) => (
count : {props.count}
-
+
);
/**
* 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](https://twitter.com/acdlite)) for creating this amazing lib for React!
## Changelog
Changelog is available [here](CHANGELOG.md).