{"library":"react-mixin","title":"React Mixin Utility for ES6 Classes","description":"react-mixin is a utility library designed to enable the use of traditional React mixins with ES6/TypeScript classes, addressing the absence of built-in support for this pattern in React's class-based components. While React itself has deprecated mixins in favor of Higher-Order Components and Hooks, this package serves as a specific migration path for legacy codebases that must integrate existing mixins with modern class syntax. The current stable version is 5.0.0, which notably adapted to React's `UNSAFE_` lifecycle methods. The library provides mechanisms to apply mixins to class prototypes for instance methods and to the classes themselves for static properties like `defaultProps` and `propTypes`. It differentiates itself by offering clear error handling for conflicting method names (instead of silent overwrites) and supporting an optional decorator syntax, allowing developers to manage mixins in a structured way within their class definitions. However, it explicitly advocates for avoiding mixins in new development.","language":"javascript","status":"deprecated","last_verified":"Sat Apr 25","install":{"commands":["npm install react-mixin"],"cli":null},"imports":["import reactMixin from 'react-mixin';","import reactMixin from 'react-mixin'; reactMixin.onClass(MyClass, myMixin);","import toUnsafe from 'react-mixin/toUnsafe';","import reactMixin from 'react-mixin'; @reactMixin.decorate(myMixin) class MyClass {}"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport reactMixin from 'react-mixin';\nimport toUnsafe from 'react-mixin/toUnsafe';\n\n// Define a simple React Component\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n    // Autobinding is not provided by react-mixin; explicit binding is necessary.\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  // Example method that might be part of or overridden by a mixin\n  handleClick() {\n    this.setState(prevState => ({ count: prevState.count + 1 }));\n  }\n\n  render() {\n    return (\n      <div>\n        <h1>Count: {this.state.count}</h1>\n        <button onClick={this.handleClick}>Increment</button>\n        <p>Props: {JSON.stringify(this.props)}</p>\n      </div>\n    );\n  }\n}\n\n// Define example mixins\nconst MyStateMixin = {\n  getInitialState() { // This method will be merged\n    return { mixedData: 'initial value' };\n  },\n  componentDidMount() {\n    console.log('MyStateMixin mounted!');\n  },\n  // Version 5.0+ requires UNSAFE_ prefix for these lifecycle methods\n  UNSAFE_componentWillMount() {\n    console.log('MyStateMixin UNSAFE_componentWillMount!');\n  }\n};\n\nconst MyPropsMixin = {\n  // This will be merged at the class level using .onClass\n  getDefaultProps() {\n    return { defaultPropFromMixin: 'default' };\n  },\n  componentDidUpdate(prevProps, prevState) {\n    console.log('MyPropsMixin updated!');\n  }\n};\n\n// --- Apply mixins to the component's prototype ---\nreactMixin(MyComponent.prototype, MyStateMixin);\n\n// --- Apply mixins with UNSAFE_ method conversion for v5+ ---\n// If MyPropsMixin had componentWillMount, we'd use toUnsafe on it.\n// For demonstration, let's assume it did and apply it through toUnsafe for clarity.\nconst fixedPropsMixin = toUnsafe(MyPropsMixin);\nreactMixin(MyComponent.prototype, fixedPropsMixin);\n\n// --- Apply mixins to the class itself for static properties (e.g., getDefaultProps) ---\nreactMixin.onClass(MyComponent, MyPropsMixin); // Note: use the original mixin here for getDefaultProps merging.\n\n// --- Example using the decorator syntax (requires Babel with decorator support) ---\n// @reactMixin.decorate(MyStateMixin)\n// class DecoratedComponent extends React.Component {\n//   render() { return <div>Decorated Component!</div>; }\n// }\n\n// Simulate instantiation to show applied props/state (in a real app, you'd render this to DOM)\nconsole.log(\"Component created with mixins applied. Check console for lifecycle logs.\");\nconst instance = new MyComponent({ customInput: 'test' });\nconsole.log('Initial component state:', instance.state); // Should include mixedData\nconsole.log('Initial component props (merged with defaults):', instance.props); // Should include defaultPropFromMixin\n","lang":"typescript","description":"This code demonstrates how to apply mixins to React ES6 classes using `react-mixin`. It covers applying mixins to the prototype for instance methods, using `reactMixin.onClass` for static class properties like `getDefaultProps`, and utilizing `react-mixin/toUnsafe` for v5's `UNSAFE_` lifecycle method compatibility.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}