react-registry is a library for registering, retrieving, and creating React components.
Easily define layouts in configuration files
- Avoid hard coded lists of available components
- Avoid importing every possible component (may require bundler setup)
Dynamically provide overrides for components based on custom conditions
- Customize components per client in a SaaS environment
- Provide upgrades to new versions of components seamlessly
react-registry also supports many other features such as multiple registries for organizing components, registry providers and wrappers for advanced retrieval options, and TypeScript interfaces to simplify registering components.
npm install react-registry --save
import { Registry } form 'react-registry';
class TitleComponent extends React.Component {
render() {
return (
<div>
<h1>{this.props.text}</h1>
<p>{this.props.children}</p>
<div>
)
}
}
Registry.register(TitleComponent, "title");Note: to use this syntax without requiring the component to be imported later, the bundler may need to be configured appropriately.
JS Syntax
import { Registry } from 'react-registry';
class MyApp extends React.Component {
render() {
// Retrieve component from the registry
const TitleComponent = Registry.get("title");
// or
// Retrieve the component and create an element with it.
const titleComponent = Registry.createElement("title", {text: "Hello Registry"});
return (
<div>
<TitleComponent text="HelloRegistry" />
{ /* or */ }
{titleComponent}
</div>
)
}
}Component Syntax
import { Registered } from 'react-registry';
class MyApp extends React.Component {
render() {
return (
<div>
{/* Retrieve component from the registry and create React element */}
<Registered id="title" text="Hello Registry">
<div>A child</div>
</Registered>
{/* Above is equivalent adding the component as if it was imported normally
*
* <TitleComponent text="Hello Registry">
* <div>A child</div>
* </TitleComponent>
*/}
</div>
)
}
}For more advanced usage, such as providers, custom conditions, and separate registries, view the full documentation and browse the examples.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent