react-recompose

import React from 'react'; import ReactDOM from 'react-dom/client'; import { withState, compose } from 'recompose'; // Define the props for the enhanced component interface CounterProps { counter: number; setCounter: (updater: (n: number) => number) => void; } // Create an enhancer using recompose's HOCs const enhance = compose<CounterProps, {}>( withState('counter', 'setCounter', 0) ); // Define the base functional component const CounterComponent: React.FC<CounterProps> = ({ counter, setCounter }) => ( <div> <h2>Recompose Counter Example</h2> <p>Current Count: {counter}</p> <button onClick={() => setCounter(n => n + 1)}>Increment</button> <button onClick={() => setCounter(n => n - 1)}>Decrement</button> </div> ); // Enhance the component const Counter = enhance(CounterComponent); // Render the enhanced component const rootElement = document.getElementById('root'); if (rootElement) { const root = ReactDOM.createRoot(rootElement); root.render( <React.StrictMode> <Counter /> </React.StrictMode> ); } else { console.error('Root element not found. Please ensure an element with id="root" exists in your HTML.'); } // Add a div#root to your HTML file to make this runnable. // Example: <div id="root"></div>