zanettin / Incompose
Licence: mit
A inferno utility belt for function components and higher-order components
Stars: ✭ 76
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Incompose
Rando.js
The world's easiest, most powerful random function.
Stars: ✭ 659 (+767.11%)
Mutual labels: npm, npm-package
Actions Package Update
keeps npm dependencies up-to-date by making pull requests from GitHub Actions or CI.
Stars: ✭ 36 (-52.63%)
Mutual labels: npm, npm-package
Not Awesome Es6 Classes
A curated list of resources on why ES6 (aka ES2015) classes are NOT awesome
Stars: ✭ 1,185 (+1459.21%)
Mutual labels: functional-programming, inferno
Awesome Node Utils
some useful npm packages for nodejs itself
Stars: ✭ 51 (-32.89%)
Mutual labels: npm, npm-package
Vanilla Framework
From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
Stars: ✭ 476 (+526.32%)
Mutual labels: npm, npm-package
Yarpm
CLI tool to run npm scripts with either npm or yarn, depending on how it was started
Stars: ✭ 13 (-82.89%)
Mutual labels: npm, npm-package
React Use Api
Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
Stars: ✭ 49 (-35.53%)
Mutual labels: npm, npm-package
Inferno Most Fp Demo
A demo for the ReactJS Tampa Bay meetup showing how to build a React+Redux-like architecture from scratch using Inferno, Most.js, reactive programmning, and various functional programming tools & techniques
Stars: ✭ 45 (-40.79%)
Mutual labels: functional-programming, inferno
Npm Run All
A CLI tool to run multiple npm-scripts in parallel or sequential.
Stars: ✭ 4,496 (+5815.79%)
Mutual labels: npm, npm-package
React Bps
🔱 Create breakpoints to your component props
Stars: ✭ 64 (-15.79%)
Mutual labels: higher-order-component, hoc
Node Thermal Printer
This npm package was made to control epson and star thermal printers
Stars: ✭ 424 (+457.89%)
Mutual labels: npm, npm-package
Synp
Convert yarn.lock to package-lock.json and vice versa
Stars: ✭ 510 (+571.05%)
Mutual labels: npm, npm-package
Recompact
⚛ A set of React higher-order components utilities. Drop-in replacement for recompose.
Stars: ✭ 419 (+451.32%)
Mutual labels: higher-order-component, hoc
Eslint Plugin Node
Additional ESLint's rules for Node.js
Stars: ✭ 740 (+873.68%)
Mutual labels: npm, npm-package
Typescript Webpack Starter
⚡ create-ts-lib: A Starter Kit and a CLI to create your TypeScript / ES6 module bundled by Webpack without thinking about build or unit tests configurations. 🏠
Stars: ✭ 358 (+371.05%)
Mutual labels: npm, npm-package
React Pro Sidebar
Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus
Stars: ✭ 359 (+372.37%)
Mutual labels: npm, npm-package
Packagephobia
⚖️ Find the cost of adding a new dependency to your project
Stars: ✭ 1,110 (+1360.53%)
Mutual labels: npm, npm-package
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.
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].