Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devnet-io/react-registry
A library for registering, retrieving, and creating React components
https://github.com/devnet-io/react-registry
javascript react registry saas typescript
Last synced: 22 days ago
JSON representation
A library for registering, retrieving, and creating React components
- Host: GitHub
- URL: https://github.com/devnet-io/react-registry
- Owner: devnet-io
- License: mit
- Created: 2017-09-27T05:59:02.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:18:13.000Z (almost 2 years ago)
- Last Synced: 2024-11-25T02:44:03.845Z (about 1 month ago)
- Topics: javascript, react, registry, saas, typescript
- Language: TypeScript
- Homepage: https://www.devnet.io/libs/react-registry/
- Size: 1.31 MB
- Stars: 23
- Watchers: 1
- Forks: 12
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Registry
[](https://github.com/devnet-io/react-registry/blob/master/LICENSE)
[](https://www.npmjs.com/package/react-registry)
[](https://travis-ci.org/devnet-io/react-registry)
[](https://coveralls.io/github/devnet-io/react-registry)
[](https://github.com/devnet-io/react-registry/pulls)
react-registry is a library for registering, retrieving, and creating React components.
## Why use react-registry?
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.
[View full documentation](https://www.devnet.io/libs/react-registry)
## Getting started
```
npm install react-registry --save
```
## Basic Usage
### Registering a component
```jsx
import { Registry } form 'react-registry';
class TitleComponent extends React.Component {
render() {
return (
{this.props.text}
{this.props.children}
)
}
}
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](https://www.devnet.io/libs/react-registry/docs/bundlers).*
### Retrieving and Rendering a Component
***JS Syntax***
```jsx
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 (
{ /* or */ }
{titleComponent}
)
}
}
```
***Component Syntax***
```jsx
import { Registered } from 'react-registry';
class MyApp extends React.Component {
render() {
return (
{/* Retrieve component from the registry and create React element */}
A child
{/* Above is equivalent adding the component as if it was imported normally
*
*
*
A child
*
*/}
)
}
}
```
## Advanced Usage
For more advanced usage, such as providers, custom conditions, and separate registries, view the [full documentation](https://www.devnet.io/libs/react-registry) and browse the examples.