{"id":30891246,"url":"https://github.com/archef2000/react-planner","last_synced_at":"2025-09-08T18:07:08.928Z","repository":{"id":312097317,"uuid":"1046300563","full_name":"archef2000/react-planner","owner":"archef2000","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-28T20:19:32.000Z","size":15090,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-28T20:57:28.083Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/archef2000.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,"zenodo":null}},"created_at":"2025-08-28T13:38:24.000Z","updated_at":"2025-08-28T20:19:36.000Z","dependencies_parsed_at":"2025-08-28T21:07:42.637Z","dependency_job_id":null,"html_url":"https://github.com/archef2000/react-planner","commit_stats":null,"previous_names":["archef2000/react-planner"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/archef2000/react-planner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archef2000%2Freact-planner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archef2000%2Freact-planner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archef2000%2Freact-planner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archef2000%2Freact-planner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/archef2000","download_url":"https://codeload.github.com/archef2000/react-planner/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archef2000%2Freact-planner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274226181,"owners_count":25244667,"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","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-09-08T18:07:05.575Z","updated_at":"2025-09-08T18:07:08.919Z","avatar_url":"https://github.com/archef2000.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-planner\n\nThis is an updated version of the [original project](https://github.com/cvdlab/react-planner) with TypeScript and major libary version updates and changes.\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## Information\n* This updated version can be used as a replacement with only minor changes to the Catalog\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 {createStore} from 'redux';\nimport {Provider} from 'react-redux';\n\n//download this demo catalog https://github.com/archef2000/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['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- [Konstantin](https://github.com/archef2000)\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://react.dev/\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/archef2000/react-planner/master/preview.png\n[demo]: https://archef2000.github.io/react-planner\n[cvdlab]: http://cvdlab.org/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farchef2000%2Freact-planner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farchef2000%2Freact-planner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farchef2000%2Freact-planner/lists"}