Aysnine / rc-dynamic

React DnD component tree

rc-dynamic

React component Drag and Drop and Config Driven UI demo.

Preview here 👉 https://d2.pub/rc-dynamic/preview/

Main integrations

• esbuild
• React v17
• TypeScript 4.1+

Getting Started

# install dependencies
yarn install

# development mode
yarn serve

# build production
yarn build

# check code styles
yarn lint:script

# check types
yarn type

Components

• Container
• Text
• LineChart
• GaugeChart
• SunburstChart

DnD & Sortable library

• 😅 atlassian/react-beautiful-dnd
  • #1001
• ⌛️ SortableJS/react-sortablejs
• 🤔 clauderic/dnd-kit
• 🤔 clauderic/react-sortable-hoc
• 🤔 frontend-collective/react-sortable-tree

Refer

• 🌟 https://codesandbox.io/s/react-sortable-js-nested-tu8nn
• 🌟 https://codesandbox.io/s/hook-compose-component-hrglp?file=/src/App.tsx
• https://www.storyblok.com/tp/react-dynamic-component-from-json
• https://github.com/zaydek/esbuild-hot-reload
• https://techmusings.dev/
• https://github.com/chriskitson/react-drag-drop-layout-builder
• https://medium.com/javascript-in-plain-english/build-a-drag-and-drop-dnd-layout-builder-with-react-and-immutablejs-78a0797259a6