{"id":24510810,"url":"https://github.com/rhdeck/react-reality-components","last_synced_at":"2025-06-10T10:04:04.103Z","repository":{"id":104234374,"uuid":"137210945","full_name":"rhdeck/react-reality-components","owner":"rhdeck","description":"Higher-level components and helpers for react-reality","archived":false,"fork":false,"pushed_at":"2018-06-23T18:51:21.000Z","size":24,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T09:41:38.755Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/rhdeck.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":"2018-06-13T12:13:26.000Z","updated_at":"2018-06-23T18:51:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"98ba789e-5f1a-4065-9d95-b502a4b2768d","html_url":"https://github.com/rhdeck/react-reality-components","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/rhdeck%2Freact-reality-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Freact-reality-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Freact-reality-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Freact-reality-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rhdeck","download_url":"https://codeload.github.com/rhdeck/react-reality-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Freact-reality-components/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259053193,"owners_count":22798421,"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":[],"created_at":"2025-01-22T00:31:17.914Z","updated_at":"2025-06-10T10:04:03.966Z","avatar_url":"https://github.com/rhdeck.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-reality-components\n\nHelper components to allow terser implementation of AR using [react-reality](https://github.com/rhdeck/react-reality)\n\n# 2-D Enhancements\n\n## ARButton\n\nQuickly create a 2-d tappable button floating in space. It is a node, but is best mounted on a node with a bit of distance to the user. Requires viewing through `\u003cARTouchableMonoView /\u003e` - otherwise how would you tap it?\n\n### Props\n\nInherits props from `\u003cARSign /\u003e` and adds:\n\n- `title`: Title text for the button\n- `pressDepth`: How much to change z-position when pressed. (negative for \"press-in\") (Default -0.2 meters)\n- `highlightColor`: Color to change to when pressed. (default: purple)\n\n## ARSign\n\nQuickly create a 2-d sign with text floating in space. Acts as a geometry. (E.g. you mount it on a node)\n\n### Props\n\nInherits props from `\u003cARPlaneScene /\u003e` and adds\n`text`: The text to display\n\n### Example\n\n```jsx\n\u003cARNode\u003e\n  \u003cARSign text=\"Hi there everybody\" /\u003e\n\u003c/ARNode\u003e\n```\n\n**Note** An even higher-level implementation that smushes the node props in is available as `\u003cARSignNode /\u003e`\n\n## ARPlaneScene\n\nA more generalized implementation that mounts an `\u003cARSKScene /\u003e` on a `\u003cARPlane /\u003e` to speed up generation of 2-D content floating in space. Acts as a geometry.\n\n### Props\n\nInherits from `\u003cARPlane /\u003e` and `\u003cARSKScene /\u003e` and adds\n`ppm`: The pixels-per-meter (roughly DPI x 38) to define detail level of your sign.\n\n**Note** An even higher-level implementation that smushes the node props in is available as `\u003cARPlaneSceneNode /\u003e`\n\n## ARCenteredSKLabel\n\nCreates a text label with horizontal and vertical centering.\n\n### Props\n\nOther props inherited from `\u003cARSKLabel /\u003e`\n\n### Example\n\n```jsx\n\u003cARNode\u003e\n\u003cARPlaneScene\u003e\n  \u003cARCenteredSKLabel width={10 * 38} height={10*38} text=\"Hi there everybody\" /\u003e\n\u003c/ARPlaneScene\u003e\n```\n\n# Enhanced Geometries\n\n## Colored Geometries\n\nThese components apply a `color` prop to the diffuse property of all sides of the geometry.\n\n- ARColoredBox\n- ARColoredCapsule\n- ARColoredCone\n- ARColoredCapsule\n- ARColoredPlane\n- ARColoredPyramid\n- ARColoredShape\n- ARColoredSphere\n- ARColoredText\n- ARColoredTorus\n- ARColoredTube\n\n## Textured Geometries\n\nThese components apply a `path` prop containing a path to a locally saved texture to all sides of the geometry.\n\n- ARTexturedBox\n- ARTexturedCapsule\n- ARTexturedCone\n- ARTexturedCapsule\n- ARTexturedPlane\n- ARTexturedPyramid\n- ARTexturedShape\n- ARTexturedSphere\n- ARTexturedText\n- ARTexturedTorus\n- ARTexturedTube\n\n# Enhanced Nodes\n\n## Basic Geometry-Node Combinations\n\nThe following components smush the properties of the node with the properties of the geometry. Materials can be applied as children.\n\n- ARBoxNode\n- ARCapsuleNode\n- ARConeNode\n- ARCapsuleNode\n- ARPlaneNode\n- ARPyramidNode\n- ARShapeNode\n- ARSphereNode\n- ARTextNode\n- ARTorusNode\n- ARTubeNode\n- ARSignNode\n- ARPlaneSceneNode\n\n## Colored Geometry-Node Combinations\n\nThe following smush the properties of the node together with the properties of the geometry and add a prop `color` to trigger the diffuse color of the geometry across all surfaces. No material components need to be added.\n\n- ARColoredBoxNode\n- ARColoredCapsuleNode\n- ARColoredConeNode\n- ARColoredCapsuleNode\n- ARColoredPlaneNode\n- ARColoredPyramidNode\n- ARColoredShapeNode\n- ARColoredSphereNode\n- ARColoredTextNode\n- ARColoredTorusNode\n- ARColoredTubeNode\n\n## Textured Geometry-Node Combinations\n\nThe following components smush the props of the node and the geometry but allo add a prop `path` to a path texture to be used as the diffuse material. No material components need to be added\n\n- ARTexturedBoxNode\n- ARTexturedCapsuleNode\n- ARTexturedConeNode\n- ARTexturedCapsuleNode\n- ARTexturedPlaneNode\n- ARTexturedPyramidNode\n- ARTexturedShapeNode\n- ARTexturedSphereNode\n- ARTexturedTextNode\n- ARTexturedTorusNode\n- ARTexturedTubeNode\n\n## ARMeNode\n\nComponent that represents current user position. Implements the details of a `\u003cARPositionProvider /\u003e` so you don't have to.\n\n# Enhanced Materials\n\n## ARColor\n\nHigher-order component to apply a `color` prop as the material to the geometry you are attaching to.\n\n```jsx\n\u003cARBox\u003e\n  \u003cARColor color=\"red\" /\u003e\n\u003c/ARBox\u003e\n```\n\nIf prop `index` is specified, the color is applied only to that face of the geometry.\n\n```jsx\n\u003cARBox\u003e\n  \u003cARColor index={0} color=\"red\" /\u003e\n  \u003cARColor index={1} color=\"blue\" /\u003e\n  \u003cARColor index={2} color=\"red\" /\u003e\n  \u003cARColor index={3} color=\"blue\" /\u003e\n  \u003cARColor index={4} color=\"red\" /\u003e\n  \u003cARColor index={5} color=\"blue\" /\u003e\n\u003c/ARBox\u003e\n```\n\n## ARTexture\n\nHigher-order component to apply a `path` prop as the path to the texture image for the geometry you are attaching to.\n\n```jsx\n\u003cARBox\u003e\n  \u003cARTexture path={mytexturepath} /\u003e\n\u003c/ARBox\u003e\n```\n\nIf prop `index` is specified, the texture is applied only to that face of the geometry.\n\n```jsx\n\u003cARBox\u003e\n  \u003cARColor index={0} color=\"red\" /\u003e\n  \u003cARTexture index={1} path={mytexturepath} /\u003e\n  \u003cARColor index={2} color=\"red\" /\u003e\n  \u003cARTexture index={3} path={mytexturepath} /\u003e\n  \u003cARColor index={4} color=\"red\" /\u003e\n  \u003cARTexture index={5} path={mytexturepath} /\u003e\n\u003c/ARBox\u003e\n```\n\n# Enhanced Context Providers\n\n## ARNoSession\n\nComponent whose children are displayed when the AR session is not spun up yet. Use for placeholder views.\n\n## ARIsSession\n\nComponent whose chidren are displayed when the AR sesison is loaded\n\n## ARNoTracking\n\nComponent that shows children when you have no planes or images are detected. Requires `\u003cARTrackingProvider /\u003e` ancestor in tree\n\n## ARIsTracking\n\nComponent that shows only when at least one plane or image detecrted. Requires `\u003cARTrackingProvider /\u003e` ancestor in tree\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhdeck%2Freact-reality-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frhdeck%2Freact-reality-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhdeck%2Freact-reality-components/lists"}