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

1. Declare a list of slots as an enum.

export enum SlotsEnum {
  LOGO = 'LOGO',
  CLICKER = 'CLICKER',
  DOCS = 'DOCS'
}

2. Declare props types accepted by slots.

export type SlotsPropsTypes = {
  [SlotsEnum.CLICKER]: Record<string, unknown>
  [SlotsEnum.LOGO]: Record<string, unknown>
  [SlotsEnum.DOCS]: Record<string, unknown>
}

3. 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.

License

MIT