React Component Managers

3.2.2 · abandoned · verified Sun Apr 19

react-component-managers is a utility library designed to simplify the composition of functionality into React components, serving as an alternative to traditional mixins. Released in 2018, its stable version is `3.2.2`. The library aims to provide a lightweight composition solution, similar to `recompose` but without introducing Higher-Order Component (HoC) wrappers, which can lead to deeper component hierarchies. Its primary use case was to address concerns around mixin deprecation and the overhead of HoCs, offering a direct way to inject behavior. Given its last update in July 2018, prior to the widespread adoption of React Hooks, the library is no longer actively developed and reflects a component design paradigm that has largely been superseded by modern React patterns. Its release cadence was slow, and development has ceased.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'on') or similar method-not-found errors
```
cause Attempting to use `manager` or `compose` with a non-React component, or incorrectly calling the `manager` function outside of its intended lifecycle hook.

fix Ensure `manager` is correctly invoked and integrated within a React class component's context, as it expects a specific signature to inject behavior. Double-check the usage against the library's examples, which typically involve passing the manager's output to `compose`.
```
Module not found: Can't resolve 'react-component-managers'
```
cause The package is not installed or there's a typo in the import path.

fix Run `npm install react-component-managers` or `yarn add react-component-managers`. Verify the spelling of the package name in your import statements.

Warnings

breaking The library is abandoned and not actively maintained. It was last updated in 2018, before the introduction of React Hooks (React 16.8 in 2019), which dramatically changed how state and side effects are managed in functional components.
Fix: Migrate to modern React Hooks for state and side effect management in functional components (e.g., `useState`, `useEffect`, custom hooks) or consider alternative state management libraries if using class components (e.g., Redux, MobX) or other component composition patterns like render props or contemporary Higher-Order Components.
gotcha This library is designed for class components and older React patterns, primarily as an alternative to mixins. It does not natively support React functional components or hooks.
Fix: Use this library exclusively with React class components or refactor your application to use modern functional components with hooks. Do not attempt to use `manager` or `compose` with functional components as it is not designed for that paradigm.
deprecated The patterns addressed by `react-component-managers` (mixins, pre-hooks component composition) are largely considered deprecated or suboptimal in modern React development, favoring hooks and more explicit dependency injection patterns.
Fix: For new development, adopt React Hooks for component logic and state. For existing codebases using this library, consider a progressive migration strategy to functional components and hooks.

Install

npm install react-component-managers npm
yarn add react-component-managers yarn
pnpm add react-component-managers pnpm

Imports

manager
wrong:
```
const { manager } = require('react-component-managers');
```
correct:
```
import { manager } from 'react-component-managers'
```
Primarily used for creating stateful component logic. CommonJS `require` is also possible but less idiomatic in modern React contexts.
compose
wrong:
```
const compose = require('react-component-managers').compose;
```
correct:
```
import { compose } from 'react-component-managers'
```
Used for combining multiple manager functions. `require` syntax is prone to errors if not destructuring correctly.
*
wrong:
```
import ComponentManagers from 'react-component-managers'
```
correct:
```
import * as ComponentManagers from 'react-component-managers'
```
The library exports named modules, not a default export. Attempting a default import will result in `undefined`.

Quickstart

Demonstrates the composition of two managers, `counter` and `logger`, into a class component `MyComponent` using the `compose` helper. The `manager` function defines behavior that can interact with component lifecycle events or props.

import React from 'react';
import { manager, compose } from 'react-component-managers';

const counter = manager((_props, { on }) => {
  let count = 0;
  return on('click', () => count++);
});

const logger = manager((_props, { on }) => {
  on('mount', () => console.log('Component mounted!'));
  on('unmount', () => console.log('Component unmounted!'));
});

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.props.onClick}>Increment</button>
      </div>
    );
  }
}

// Compose the managers with the component
const ManagedComponent = compose(counter, logger)(MyComponent);

// Example usage (e.g., in App.js)
// function App() {
//   return <ManagedComponent />;
// }
// export default App;

// For quickstart, just render to demonstrate the pattern
// This isn't a full runnable example without a React renderer
// but illustrates the composition.

view raw JSON →