Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cvdlab/react-planner
:pencil2: A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.
https://github.com/cvdlab/react-planner
component draw floorplans interface react react-component reactjs svg threejs ui webgl
Last synced: 1 day ago
JSON representation
:pencil2: A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.
- Host: GitHub
- URL: https://github.com/cvdlab/react-planner
- Owner: cvdlab
- License: mit
- Created: 2016-06-27T15:30:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-20T01:42:13.000Z (8 months ago)
- Last Synced: 2024-10-29T14:53:23.473Z (about 2 months ago)
- Topics: component, draw, floorplans, interface, react, react-component, reactjs, svg, threejs, ui, webgl
- Language: JavaScript
- Homepage: https://cvdlab.github.io/react-planner
- Size: 49.1 MB
- Stars: 1,298
- Watchers: 56
- Forks: 462
- Open Issues: 102
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-planner
*react-planner* is a [React][react] component which can be used to draw model buildings. Drag & drop from a catalog of customizable and ready-to-use objects, you can start from 2D wireframes and land on 3D models. As a developer you can provide your users with new objects by adding them to the catalog.
[![npm][npm_label]][npm_link]
![javascript][js]
![react-version][react_version]
## Demo
[Demo][demo]
[![react-planner][preview_image]][demo]
## Usage
``` es6
import React from 'react';
import ReactDOM from 'react-dom';
import {Map} from 'immutable';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
//download this demo catalog https://github.com/cvdlab/react-planner/tree/master/demo/src/catalog
import MyCatalog from './catalog/mycatalog';
import {
Models as PlannerModels,
reducer as PlannerReducer,
ReactPlanner,
Plugins as PlannerPlugins,
} from 'react-planner';
//define state
let AppState = Map({
'react-planner': new PlannerModels.State()
});
//define reducer
let reducer = (state, action) => {
state = state || AppState;
state = state.update('react-planner', plannerState => PlannerReducer(plannerState, action));
return state;
};
let store = createStore(reducer, null, window.devToolsExtension ? window.devToolsExtension() : f => f);
let plugins = [
PlannerPlugins.Keyboard(),
PlannerPlugins.Autosave('react-planner_v0'),
PlannerPlugins.ConsoleDebugger(),
];
//render
ReactDOM.render(
(
state.get('react-planner')}
/>
),
document.getElementById('app')
);
```
## Docs
- [Create a Property](docs/HOW_TO_CREATE_A_PROPERTY.md)
- [Create a Catalog](docs/HOW_TO_CREATE_A_CATALOG.md)
- [Create a Catalog's Element](docs/HOW_TO_CREATE_AN_ELEMENT.md)
## Authors
- [chrvadala](https://github.com/chrvadala)
- [danilosalvati](https://github.com/danilosalvati)
- [enricomarino](https://github.com/enricomarino)
- [federicospini](https://github.com/federicospini)
- [alessiocarrafa](https://github.com/alessiocarrafa)
- [stefanoperrone](https://github.com/stefanoperrone)
Developed @ [CVDLAB][cvdlab]
## Contributing
Your contributions (issues and pull request) are very appreciated!
## Contributors
- [JikkuJose](https://github.com/JikkuJose)
- [Yeri-Kim](https://github.com/Yeri-Kim)
- [lucacastoro](https://github.com/lucacastoro)
- [cbosse-skwirrel](https://github.com/cbosse-skwirrel)
- [JaccoGoris](https://github.com/JaccoGoris)
## License
MIT
[react]: https://facebook.github.io/react/
[npm_label]: https://img.shields.io/npm/v/react-planner.svg?maxAge=2592000?style=plastic
[npm_link]: https://www.npmjs.com/package/react-planner
[js]: https://img.shields.io/badge/javascript-ES6-fbde34.svg
[react_version]: https://img.shields.io/badge/react%20version-16.0.0%20or%20later-61dafb.svg
[preview_image]: https://raw.githubusercontent.com/cvdlab/react-planner/master/preview.png
[demo]: https://cvdlab.github.io/react-planner
[cvdlab]: http://cvdlab.org/