Registry /
web-framework / react-universal-interface
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
render
✓ import { render } from 'react-universal-interface';
✗ const { render } = require('react-universal-interface');
Primary function for handling universal children definition. While CommonJS `require` might work in some transpiled environments, ESM `import` is the idiomatic way for modern React projects.
createEnhancer
✓ import { createEnhancer } from 'react-universal-interface';
✗ const createEnhancer = require('react-universal-interface').createEnhancer;
Used to create Higher-Order Components from FaCC components. Follows the same import conventions as `render`.
UniversalProps
✓ import { UniversalProps } from 'react-universal-interface';
TypeScript interface for extending component props to support the universal interface patterns. Only needed for TypeScript projects.
Demonstrates the `MyData` component leveraging `render` to support FaCC, render prop, component prop, and prop injection patterns, alongside `createEnhancer` for HOCs.
import React, { Component } from 'react';
import { render, createEnhancer, UniversalProps } from 'react-universal-interface';
interface MyDataState {
counter: number;
}
interface MyDataProps extends UniversalProps<MyDataState> {}
class MyData extends Component<MyDataProps, MyDataState> {
state = { counter: 0 };
componentDidMount() {
this.interval = setInterval(() => {
this.setState(prevState => ({ counter: prevState.counter + 1 }));
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
interval: NodeJS.Timeout | undefined;
render() {
return render(this.props, this.state);
}
}
const MyChildComponent: React.FC<MyDataState> = ({ counter }) => (
<div>Current counter: {counter}</div>
);
// Usage with Function-as-a-Child (FaCC)
function App() {
return (
<div>
<h2>FaCC Example:</h2>
<MyData>{(state) => <MyChildComponent {...state} />}</MyData>
<h2>Render Prop Example:</h2>
<MyData render={(state) => <MyChildComponent {...state} />} />
<h2>Component Prop Example:</h2>
<MyData comp={MyChildComponent} />
<MyData component={MyChildComponent} />
<h2>Prop Injection Example:</h2>
<MyData>
<MyChildComponent />
</MyData>
</div>
);
}
// Example of Higher Order Component usage
const withCounter = createEnhancer(MyData, 'data');
const EnhancedChild = withCounter(MyChildComponent);
function HOCApp() {
return (
<div>
<h2>HOC Example:</h2>
<EnhancedChild /> {/* MyChildComponent will receive 'data' prop from MyData */}
</div>
);
}
export default App;
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'props')
Often occurs when `this` context is lost in a class component, or `render` is called outside a component's instance context.
fixEnsure `render` is called within a class component's method (e.g., `this.render()`) and `this.props` is correctly accessible. Use arrow functions for event handlers to preserve `this`.
TS2345: Argument of type '{ children: ({ counter }: { counter: number; }) => Element; }' is not assignable to parameter of type 'MyDataProps'.
Incorrectly typing the component props when using TypeScript, not extending `UniversalProps` correctly, or passing unexpected children/props to the `MyData` component.
fixEnsure your component's props interface extends `UniversalProps<TState>`, where `TState` is the type of data your component provides (e.g., `MyDataState` in the example). Verify that the data provided to children matches the expected type.
Audit
Dependencies
reactrequiredCore library for building user interfaces with React components.
tslibrequiredTypeScript runtime library, moved to peerDependencies in v0.6.2 for better dependency management.