Skip to content

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 :)

License

Notifications You must be signed in to change notification settings

savolkov/react-declarative-render

Repository files navigation

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'
}
  1. Declare props types accepted by slots.
export type SlotsPropsTypes = {
  [SlotsEnum.CLICKER]: Record<string, unknown>
  [SlotsEnum.LOGO]: Record<string, unknown>
  [SlotsEnum.DOCS]: Record<string, unknown>
}
  1. 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

About

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 :)

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published