https://github.com/savolkov/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 :)
https://github.com/savolkov/react-declarative-render

architecture declarative react

Last synced: 17 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/savolkov/react-declarative-render
• Owner: savolkov
• License: mit
• Created: 2023-08-07T12:50:31.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-09T12:31:33.000Z (over 1 year ago)
• Last Synced: 2024-10-07T21:20:13.218Z (about 1 month ago)
• Topics: architecture, declarative, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-declarative-render
• Size: 76.2 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: license

Awesome Lists containing this project

README

        
# 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](https://github.com/savolkov/react-declarative-render/tree/main/demo/react-declarative-render-demo).

Live demo and playground are not ready yet.

## Current state

Library is not production-ready. Our development plan is described in [GitHub Project](https://github.com/users/savolkov/projects/1) and [GitHub Issues](https://github.com/savolkov/react-declarative-render/issues/)

## Installation

Use your favorite package manager:

### pnpm

```bash

pnpm i react-declarative-render

```

### yarn

```bash

yarn i react-declarative-render

```

### npm

```bash

npm i react-declarative-render

```

## Usage

You can refer to the [demo project](https://github.com/savolkov/react-declarative-render/tree/main/demo/react-declarative-render-demo) to play with the library.

### 1. Preparating infrastructure

1. Declare a list of slots as an enum.

```tsx

export enum SlotsEnum {

  LOGO = 'LOGO',

  CLICKER = 'CLICKER',

  DOCS = 'DOCS'

}

```

2. Declare props types accepted by slots.

```tsx

export type SlotsPropsTypes = {

  [SlotsEnum.CLICKER]: Record

  [SlotsEnum.LOGO]: Record

  [SlotsEnum.DOCS]: Record

}

```

3. Init `UISystemService`

```tsx

import { UISystemService } from 'react-declarative-render'

import { type SlotsPropsTypes } from './components/SlotsPropsTypes'

const uiSystemService = new UISystemService({ rootElementName: 'react-declarative-render-root' })

```

### 2. Place UISlots

At the places of desired render, place `UISlot` components with specified IDs.

```tsx

```

### 3. Render components

```tsx

    uiSystem.registerComponent({

      id: SlotsEnum.LOGO,

      component: 

    })

```

## Contributing

Pull requests are pretty much welcome.

## License

[MIT](https://github.com/savolkov/react-declarative-render/blob/main/license)