{"id":13402477,"url":"https://github.com/cvdlab/react-planner","last_synced_at":"2025-05-14T22:08:07.784Z","repository":{"id":38311210,"uuid":"62066830","full_name":"cvdlab/react-planner","owner":"cvdlab","description":":pencil2: A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.","archived":false,"fork":false,"pushed_at":"2024-04-20T01:42:13.000Z","size":51483,"stargazers_count":1350,"open_issues_count":103,"forks_count":468,"subscribers_count":55,"default_branch":"master","last_synced_at":"2025-05-13T21:29:19.579Z","etag":null,"topics":["component","draw","floorplans","interface","react","react-component","reactjs","svg","threejs","ui","webgl"],"latest_commit_sha":null,"homepage":"https://cvdlab.github.io/react-planner","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cvdlab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-27T15:30:52.000Z","updated_at":"2025-05-13T19:16:21.000Z","dependencies_parsed_at":"2023-02-17T01:46:38.969Z","dependency_job_id":"c5602060-47c4-48d8-8658-45aeb2664346","html_url":"https://github.com/cvdlab/react-planner","commit_stats":{"total_commits":1390,"total_committers":14,"mean_commits":99.28571428571429,"dds":0.6158273381294964,"last_synced_commit":"efa710e2840f55f4670ceff2c16384a7d43b42bb"},"previous_names":[],"tags_count":106,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvdlab%2Freact-planner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvdlab%2Freact-planner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvdlab%2Freact-planner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvdlab%2Freact-planner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cvdlab","download_url":"https://codeload.github.com/cvdlab/react-planner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254235696,"owners_count":22036963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","draw","floorplans","interface","react","react-component","reactjs","svg","threejs","ui","webgl"],"created_at":"2024-07-30T19:01:16.544Z","updated_at":"2025-05-14T22:08:02.767Z","avatar_url":"https://github.com/cvdlab.png","language":"JavaScript","readme":"# react-planner\n\n*react-planner* is a [React][react] component which can be used to draw model buildings. Drag \u0026 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.\n\n[![npm][npm_label]][npm_link]\n![javascript][js]\n![react-version][react_version]\n\n## Demo\n\n[Demo][demo]\n\n[![react-planner][preview_image]][demo]\n\n## Usage\n\n``` es6\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Map} from 'immutable';\nimport {createStore} from 'redux';\nimport {Provider} from 'react-redux';\n\n//download this demo catalog https://github.com/cvdlab/react-planner/tree/master/demo/src/catalog\nimport MyCatalog from './catalog/mycatalog';\n\nimport {\n  Models as PlannerModels,\n  reducer as PlannerReducer,\n  ReactPlanner,\n  Plugins as PlannerPlugins,\n} from 'react-planner';\n\n\n//define state\nlet AppState = Map({\n  'react-planner': new PlannerModels.State()\n});\n\n//define reducer\nlet reducer = (state, action) =\u003e {\n  state = state || AppState;\n  state = state.update('react-planner', plannerState =\u003e PlannerReducer(plannerState, action));\n  return state;\n};\n\nlet store = createStore(reducer, null, window.devToolsExtension ? window.devToolsExtension() : f =\u003e f);\n\nlet plugins = [\n  PlannerPlugins.Keyboard(),\n  PlannerPlugins.Autosave('react-planner_v0'),\n  PlannerPlugins.ConsoleDebugger(),\n];\n\n//render\nReactDOM.render(\n  (\n    \u003cProvider store={store}\u003e\n      \u003cReactPlanner\n        catalog={MyCatalog}\n        width={800}\n        height={600}\n        plugins={plugins}\n        stateExtractor={state =\u003e state.get('react-planner')}\n      /\u003e\n    \u003c/Provider\u003e\n  ),\n  document.getElementById('app')\n);\n\n```\n\n## Docs\n\n- [Create a Property](docs/HOW_TO_CREATE_A_PROPERTY.md)\n- [Create a Catalog](docs/HOW_TO_CREATE_A_CATALOG.md)\n- [Create a Catalog's Element](docs/HOW_TO_CREATE_AN_ELEMENT.md)\n\n## Authors\n\n- [chrvadala](https://github.com/chrvadala)\n- [danilosalvati](https://github.com/danilosalvati)\n- [enricomarino](https://github.com/enricomarino)\n- [federicospini](https://github.com/federicospini)\n- [alessiocarrafa](https://github.com/alessiocarrafa)\n- [stefanoperrone](https://github.com/stefanoperrone)\n\nDeveloped @ [CVDLAB][cvdlab]\n\n## Contributing\n\nYour contributions (issues and pull request) are very appreciated!\n\n## Contributors\n\n - [JikkuJose](https://github.com/JikkuJose)\n - [Yeri-Kim](https://github.com/Yeri-Kim)\n - [lucacastoro](https://github.com/lucacastoro)\n - [cbosse-skwirrel](https://github.com/cbosse-skwirrel)\n - [JaccoGoris](https://github.com/JaccoGoris)\n\n## License\n\nMIT\n\n[react]: https://facebook.github.io/react/\n[npm_label]: https://img.shields.io/npm/v/react-planner.svg?maxAge=2592000?style=plastic\n[npm_link]: https://www.npmjs.com/package/react-planner\n[js]: https://img.shields.io/badge/javascript-ES6-fbde34.svg\n[react_version]: https://img.shields.io/badge/react%20version-16.0.0%20or%20later-61dafb.svg\n[preview_image]: https://raw.githubusercontent.com/cvdlab/react-planner/master/preview.png\n[demo]: https://cvdlab.github.io/react-planner\n[cvdlab]: http://cvdlab.org/\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcvdlab%2Freact-planner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcvdlab%2Freact-planner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcvdlab%2Freact-planner/lists"}