{"library":"react-universal-interface","title":"React Universal Interface for Component Patterns","description":"React Universal Interface (react-universal-interface) is a lightweight utility library designed to simplify the creation of React components that can be consumed via multiple popular patterns, including Function-as-a-Child (FaCC), render props, component props, and Higher-Order Components (HOCs). It offers two primary functions: `render` for processing various child/prop definitions within a component's render method, and `createEnhancer` for generating HOCs. The package's current stable version is 0.6.2, released in May 2020. Given the lack of updates since then, the project appears to be abandoned, with no active release cadence. Its key differentiator was providing a unified API to handle diverse component interaction paradigms, a common challenge in the evolving React ecosystem before Hooks became the dominant approach for logic reuse.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-universal-interface"],"cli":null},"imports":["import { render } from 'react-universal-interface';","import { createEnhancer } from 'react-universal-interface';","import { UniversalProps } from 'react-universal-interface';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component } from 'react';\nimport { render, createEnhancer, UniversalProps } from 'react-universal-interface';\n\ninterface MyDataState {\n  counter: number;\n}\n\ninterface MyDataProps extends UniversalProps<MyDataState> {}\n\nclass MyData extends Component<MyDataProps, MyDataState> {\n  state = { counter: 0 };\n\n  componentDidMount() {\n    this.interval = setInterval(() => {\n      this.setState(prevState => ({ counter: prevState.counter + 1 }));\n    }, 1000);\n  }\n\n  componentWillUnmount() {\n    clearInterval(this.interval);\n  }\n\n  interval: NodeJS.Timeout | undefined;\n\n  render() {\n    return render(this.props, this.state);\n  }\n}\n\nconst MyChildComponent: React.FC<MyDataState> = ({ counter }) => (\n  <div>Current counter: {counter}</div>\n);\n\n// Usage with Function-as-a-Child (FaCC)\nfunction App() {\n  return (\n    <div>\n      <h2>FaCC Example:</h2>\n      <MyData>{(state) => <MyChildComponent {...state} />}</MyData>\n\n      <h2>Render Prop Example:</h2>\n      <MyData render={(state) => <MyChildComponent {...state} />} />\n\n      <h2>Component Prop Example:</h2>\n      <MyData comp={MyChildComponent} />\n      <MyData component={MyChildComponent} />\n\n      <h2>Prop Injection Example:</h2>\n      <MyData>\n        <MyChildComponent />\n      </MyData>\n    </div>\n  );\n}\n\n// Example of Higher Order Component usage\nconst withCounter = createEnhancer(MyData, 'data');\nconst EnhancedChild = withCounter(MyChildComponent);\n\nfunction HOCApp() {\n    return (\n        <div>\n            <h2>HOC Example:</h2>\n            <EnhancedChild /> {/* MyChildComponent will receive 'data' prop from MyData */}\n        </div>\n    );\n}\n\nexport default App;","lang":"typescript","description":"Demonstrates the `MyData` component leveraging `render` to support FaCC, render prop, component prop, and prop injection patterns, alongside `createEnhancer` for HOCs.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}