https://github.com/aysnine/rc-dynamic
React DnD component tree
https://github.com/aysnine/rc-dynamic
esbuild react17 typescript4
Last synced: 4 months ago
JSON representation
React DnD component tree
- Host: GitHub
- URL: https://github.com/aysnine/rc-dynamic
- Owner: Aysnine
- Created: 2020-12-25T06:23:09.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-11-01T03:00:26.000Z (about 1 year ago)
- Last Synced: 2025-08-16T01:44:53.351Z (4 months ago)
- Topics: esbuild, react17, typescript4
- Language: TypeScript
- Homepage: https://rc-dynamic.pages.dev
- Size: 3.17 MB
- Stars: 14
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# rc-dynamic
React component Drag and Drop and Config Driven UI demo.
Preview here 👉 https://rc-dynamic.pages.dev
## Main integrations
- [esbuild](https://esbuild.github.io/)
- [React v17](https://reactjs.org/blog/2020/10/20/react-v17.html)
- [TypeScript 4.1+](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/#jsx-factories)
## Getting Started
``` bash
# install dependencies
yarn install
# development mode
yarn serve
# build production
yarn build
# check code styles
yarn lint:script
# check types
yarn type
```
## Components
- [Container](./src/components/basic/Container/index.tsx)
- [Text](./src/components/basic/Text/index.tsx)
- [LineChart](./src/components/basic/LineChart/index.tsx)
- [GaugeChart](./src/components/basic/GaugeChart/index.tsx)
- [SunburstChart](./src/components/basic/SunburstChart/index.tsx)
## DnD & Sortable library
- 😅 [atlassian/react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)
- [#1001](https://github.com/atlassian/react-beautiful-dnd/issues/1001 )
- ⌛️ [SortableJS/react-sortablejs](https://github.com/SortableJS/react-sortablejs)
- 🤔 [clauderic/dnd-kit](https://github.com/clauderic/dnd-kit)
- 🤔 [clauderic/react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc)
- 🤔 [frontend-collective/react-sortable-tree](https://github.com/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