0.0.1-alpha.3 • Published 9 months ago
react-declarative-render v0.0.1-alpha.3
react-declarative-render
A lightweight library for declarative render of React components.
Declaratively render any component from any piece of code without having unnecessary dependencies and decrease spaghetti-styled code :)
Demo
There is demo project sourcecode.
Live demo and playground are not ready yet.
Current state
Library is not production-ready. Our development plan is described in GitHub Project and GitHub Issues
Installation
Use your favorite package manager:
pnpm
pnpm i react-declarative-render
yarn
yarn i react-declarative-render
npm
npm i react-declarative-render
Usage
You can refer to the demo project to play with the library.
1. Preparating infrastructure
- Declare a list of slots as an enum.
export enum SlotsEnum {
LOGO = 'LOGO',
CLICKER = 'CLICKER',
DOCS = 'DOCS'
}
- Declare props types accepted by slots.
export type SlotsPropsTypes = {
[SlotsEnum.CLICKER]: Record<string, unknown>
[SlotsEnum.LOGO]: Record<string, unknown>
[SlotsEnum.DOCS]: Record<string, unknown>
}
- Init
UISystemService
import { UISystemService } from 'react-declarative-render'
import { type SlotsPropsTypes } from './components/SlotsPropsTypes'
const uiSystemService = new UISystemService<SlotsPropsTypes>({ rootElementName: 'react-declarative-render-root' })
2. Place UISlots
At the places of desired render, place UISlot
components with specified IDs.
<UISystemSlot id={SlotsEnum.LOGO} uiSystemService={uiSystem} />
3. Render components
uiSystem.registerComponent({
id: SlotsEnum.LOGO,
component: <Logo />
})
Contributing
Pull requests are pretty much welcome.