
Security News
npm ‘is’ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
A React utility belt for function components and higher-order components
Recompose is a React utility belt for function components and higher-order components (HOCs). It provides a set of helper functions to simplify the process of writing and managing HOCs, making it easier to enhance and compose components in a more declarative and functional style.
withState
The `withState` HOC adds state to a functional component. In this example, it adds a `counter` state and a `setCounter` function to the `Counter` component.
const enhance = withState('counter', 'setCounter', 0);
const Counter = enhance(({ counter, setCounter }) => (
<div>
<p>{counter}</p>
<button onClick={() => setCounter(counter + 1)}>Increment</button>
</div>
));
withHandlers
The `withHandlers` HOC allows you to create handler functions that can be passed as props to the component. In this example, it creates an `onClick` handler that increments the `counter` state.
const enhance = withHandlers({
onClick: ({ counter, setCounter }) => () => setCounter(counter + 1)
});
const Counter = enhance(({ counter, onClick }) => (
<div>
<p>{counter}</p>
<button onClick={onClick}>Increment</button>
</div>
));
compose
The `compose` function allows you to combine multiple HOCs into a single HOC. In this example, it combines `withState` and `withHandlers` to create an enhanced `Counter` component.
const enhance = compose(
withState('counter', 'setCounter', 0),
withHandlers({
onClick: ({ counter, setCounter }) => () => setCounter(counter + 1)
})
);
const Counter = enhance(({ counter, onClick }) => (
<div>
<p>{counter}</p>
<button onClick={onClick}>Increment</button>
</div>
));
branch
The `branch` HOC conditionally applies an HOC based on a predicate function. In this example, it renders a loading component if `isLoading` is true, otherwise it renders `MyComponent`.
const enhance = branch(
({ isLoading }) => isLoading,
renderComponent(() => <div>Loading...</div>)
);
const MyComponent = enhance(({ data }) => (
<div>{data}</div>
));
renderNothing
The `renderNothing` HOC renders nothing if the predicate function returns true. In this example, it renders nothing if `shouldRender` is false.
const enhance = branch(
({ shouldRender }) => !shouldRender,
renderNothing
);
const MyComponent = enhance(({ data }) => (
<div>{data}</div>
));
React Hooks provide a way to use state and other React features without writing a class. They offer similar functionality to Recompose but are built into React itself, making them more integrated and easier to use in modern React applications.
Redux is a state management library for JavaScript applications. While it is more complex and powerful than Recompose, it can be used to manage state and side effects in a way that complements React components.
MobX is a state management library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). It offers a different approach to state management compared to Recompose, focusing on observables and reactions.
React-Redux is the official React binding for Redux. It provides a way to connect React components to a Redux store, offering a more structured approach to state management compared to Recompose.
Recompose is a React utility belt for function components and higher-order components. See the GitHub project page for more information.
FAQs
A React utility belt for function components and higher-order components
The npm package recompose receives a total of 798,085 weekly downloads. As such, recompose popularity was classified as popular.
We found that recompose demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.