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.

Usage no npm install needed!

<script type="module">
  import reactDdBuilder from 'https://cdn.skypack.dev/react-dd-builder';
</script>

README

React DD Builder

Travis CI npm version license

Demo

https://xizon.github.io/react-dd-builder/examples/

Table of Contents

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 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. For nodejs you have to install some dependencies.

$ sudo npm install react-dd-builder

Or clone the repo to get all source files including build scripts:

$ git clone git://github.com/xizon/react-dd-builder.git

Step 2. First, using an absolute path into your "react-dd-builder/" folder directory.

$ 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.

$ sudo npm install

Step 4. Run the following code to enter development mode. The converted ES5 files will be created.

$ npm run build

Step 5. When you done, this will spin up a server that can be accessed at

http://localhost:8080/examples/

Note:

a) ERROR: npm update check failed.

$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config

b) If you upgrade the version of Node, please execute the following code:

$ sudo npm install
$ sudo npm rebuild node-sass

File Structures


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. Thanks!

Changelog

releases

Licensing

Licensed under the MIT.