https://github.com/xizon/react-dd-builder
React DD Builder is a set of React drag and drop tool to help you build beautiful website interfaces while keeping responsive and third-party framework compatible.
https://github.com/xizon/react-dd-builder
builder drag-and-drop drag-drop react
Last synced: about 2 months ago
JSON representation
React DD Builder is a set of React drag and drop tool to help you build beautiful website interfaces while keeping responsive and third-party framework compatible.
- Host: GitHub
- URL: https://github.com/xizon/react-dd-builder
- Owner: xizon
- License: mit
- Created: 2019-05-22T01:29:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T05:42:26.000Z (over 2 years ago)
- Last Synced: 2025-03-25T13:11:35.156Z (3 months ago)
- Topics: builder, drag-and-drop, drag-drop, react
- Language: JavaScript
- Homepage: https://xizon.github.io/react-dd-builder/examples/
- Size: 1.63 MB
- Stars: 10
- Watchers: 2
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React DD Builder
[](https://travis-ci.org/xizon/react-dd-builder/)
[](https://www.npmjs.com/package/react-dd-builder)
[](LICENSE)
## Demo
[https://xizon.github.io/react-dd-builder/examples/](https://xizon.github.io/react-dd-builder/examples/)
## Table of Contents
* [Description](#description)
* [Installation And Test](#installation-and-test)
* [File Structures](#file-structures)
* [Contributing](#contributing)
* [Changelog](#changelog)
* [Licensing](#licensing)
## Description
React DD Builder is a set of React drag and drop tool to help you build beautiful website interfaces while keeping responsive and third-party framework compatible.
* * *
## Installation And Test
You will need to have [node](https://nodejs.org/) setup on your machine. That will output the built distributables to `./dist/*` and `./examples/*.html`.
**Step 1.** Use NPM (Locate your current directory of project, and enter the following command.) or download the latest version from [Github](https://github.com/xizon/react-dd-builder). For nodejs you have to install some dependencies.
```sh
$ sudo npm install react-dd-builder
```
Or clone the repo to get all source files including build scripts:
```sh
$ git clone git://github.com/xizon/react-dd-builder.git
```
**Step 2.** First, using an absolute path into your `"react-dd-builder/"` folder directory.
```sh
$ cd /{your_directory}/react-dd-builder
```
**Step 3.** Before doing all dev stuff make sure you have `Node 14+` installed. After that, run the following code in the main directory to install the node module dependencies.
```sh
$ sudo npm install
```
**Step 4.** Run the following code to enter development mode. The converted ES5 files will be created.
```sh
$ npm run build
```
**Step 5.** When you done, this will spin up a server that can be accessed at
```sh
http://localhost:8080/examples/
```
### Note:
**a) ERROR: npm update check failed.**
```sh
$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config
```
**b) If you upgrade the version of Node, please execute the following code:**
```sh
$ sudo npm install
$ sudo npm rebuild node-sass
```
* * *
## File Structures
```sh
react-dd-builder/
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── webpack.config.js
├── package-lock.json
├── package.json
├── dist/
│ ├── css/
│ │ ├── app.css
│ │ ├── app.css.map
│ │ ├── app.min.css
│ │ └── app.min.css.map
│ └── js/
│ │ ├── app.js
│ │ ├── app.js.map
│ │ ├── app.min.js
│ │ └── app.min.js.map
├── src/
│ ├── index.js
│ └── components/
├── examples/
└──
```
## Contributing
Finding bugs, sending pull requests or improving our docs - any contribution is welcome and highly appreciated. To get started, head over to our [contribution guidelines](CONTRIBUTING.md). Thanks!
## Changelog
[releases](CHANGELOG.md)
## Licensing
Licensed under the [MIT](https://opensource.org/licenses/MIT).