{"id":17137106,"url":"https://github.com/alex3165/react-mapping","last_synced_at":"2025-04-13T09:25:39.821Z","repository":{"id":57334231,"uuid":"109752849","full_name":"alex3165/react-mapping","owner":"alex3165","description":"Projection mapping in React","archived":false,"fork":false,"pushed_at":"2017-11-08T18:22:33.000Z","size":444,"stargazers_count":13,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-20T13:06:31.515Z","etag":null,"topics":["mapping","matrix","matrix3d","projection","react"],"latest_commit_sha":null,"homepage":"https://alex3165.github.io/react-mapping/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alex3165.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-06T21:37:40.000Z","updated_at":"2024-07-29T17:21:44.000Z","dependencies_parsed_at":"2022-08-30T21:52:18.155Z","dependency_job_id":null,"html_url":"https://github.com/alex3165/react-mapping","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex3165%2Freact-mapping","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex3165%2Freact-mapping/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex3165%2Freact-mapping/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex3165%2Freact-mapping/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alex3165","download_url":"https://codeload.github.com/alex3165/react-mapping/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248690020,"owners_count":21146047,"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":["mapping","matrix","matrix3d","projection","react"],"created_at":"2024-10-14T20:06:14.563Z","updated_at":"2025-04-13T09:25:39.789Z","avatar_url":"https://github.com/alex3165.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-mapping\nVideo projection mapping library in React.\n\nContain the following component:\n- Layer: Allow you to transform the children element as you wish (3d tranform and translate)\n- Grid: Add a background grid to help with accuracy while you are mapping in edit mode\n\nThis is a work in progress library.\n\n# Documentation\n\n## Layer\n\nAllow you to transform the children element as you wish (3d tranform and translate)\n\n### How to use\n```jsx\n  \u003cLayer isEditMode={true}\u003e\n    \u003cvideo src=\"A_VIDEO_SOURCE\" style={{ width: 640, height: 390 }}/\u003e\n  \u003c/Layer\u003e\n```\n\n### Properties\n- **style** : `React.CSSProperties` Style applied to the container of the children element\n- **anchorStyle** : `React.CSSProperties` Style applied to the anchor component\n- **className** : `string` Classes applied to the container of the children element\n- **anchorClassName** : `string` Classes applied to the anchor component\n- **isEditMode** : `boolean` if true, switch to edit mode and make anchors visible, if false, switch to view mode and anchor are not visible.\n- **x** : `number` Initial x position of the child element\n- **y** : `number` Initial y position of the child element\n\n------\n## Grid\n\n### How to use\n```jsx\n  \u003cGrid/\u003e\n```\n\n### Properties\n- **rows** : `number` number of rows to display\n- **columns** : `number` number of columns to display\n\n\n## TODO\n\n### Layer\n- Add layer grid\n- Add magnet\n\n- Add reset functionality\n- Add more key controls\n- Add save to localstorage\n- Add layer container style when selecting a layer\n\n## Thanks\n\nThis library has been inspired from the following blog posts / library:\n- http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/\n- https://bl.ocks.org/mbostock/10571478\n- https://github.com/glowbox/maptasticjs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex3165%2Freact-mapping","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex3165%2Freact-mapping","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex3165%2Freact-mapping/lists"}