{"library":"react-recompose","title":"React Recompose Fork for Modern React","description":"react-recompose is a community-maintained fork of the original `recompose` library, designed to bring its utility belt for functional React components and higher-order components (HOCs) into compatibility with modern React versions. While the original `recompose` was officially deprecated by its author in 2018, advocating for React Hooks as its successor, this fork ensures its functionalities work with React 17 and 18. The current stable version is 0.33.0. Releases are primarily focused on dependency updates, security patches, and maintaining compatibility with the evolving React ecosystem, rather than introducing new features. It provides an HOC-based composition pattern for projects that predate Hooks or prefer this architectural style for component logic reuse.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-recompose"],"cli":null},"imports":["import { withState } from 'recompose';","import { compose } from 'recompose';","import { withHandlers } from 'recompose';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { withState, compose } from 'recompose';\n\n// Define the props for the enhanced component\ninterface CounterProps {\n  counter: number;\n  setCounter: (updater: (n: number) => number) => void;\n}\n\n// Create an enhancer using recompose's HOCs\nconst enhance = compose<CounterProps, {}>(\n  withState('counter', 'setCounter', 0)\n);\n\n// Define the base functional component\nconst CounterComponent: React.FC<CounterProps> = ({ counter, setCounter }) => (\n  <div>\n    <h2>Recompose Counter Example</h2>\n    <p>Current Count: {counter}</p>\n    <button onClick={() => setCounter(n => n + 1)}>Increment</button>\n    <button onClick={() => setCounter(n => n - 1)}>Decrement</button>\n  </div>\n);\n\n// Enhance the component\nconst Counter = enhance(CounterComponent);\n\n// Render the enhanced component\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  const root = ReactDOM.createRoot(rootElement);\n  root.render(\n    <React.StrictMode>\n      <Counter />\n    </React.StrictMode>\n  );\n} else {\n  console.error('Root element not found. Please ensure an element with id=\"root\" exists in your HTML.');\n}\n\n// Add a div#root to your HTML file to make this runnable.\n// Example: <div id=\"root\"></div>","lang":"typescript","description":"Demonstrates how to use `withState` and `compose` from `react-recompose` to manage local component state via a Higher-Order Component pattern.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}