{"id":13716041,"url":"https://github.com/hggeorgiev/CentroUI","last_synced_at":"2025-05-07T05:32:04.866Z","repository":{"id":67232785,"uuid":"92656937","full_name":"hggeorgiev/CentroUI","owner":"hggeorgiev","description":"CentroUI is a library for building user interfaces for WebVR","archived":false,"fork":false,"pushed_at":"2017-08-10T16:07:45.000Z","size":3900,"stargazers_count":141,"open_issues_count":7,"forks_count":20,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-27T16:42:01.713Z","etag":null,"topics":["oculus","react","reactvr","rift","ui-components","uikit","virtual-reality","vive","webvr","webvr-framework"],"latest_commit_sha":null,"homepage":"http://centroui.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hggeorgiev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-05-28T11:23:32.000Z","updated_at":"2024-02-18T05:52:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"ee269de6-2f68-4de2-af92-f3958a45aa09","html_url":"https://github.com/hggeorgiev/CentroUI","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hggeorgiev%2FCentroUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hggeorgiev%2FCentroUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hggeorgiev%2FCentroUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hggeorgiev%2FCentroUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hggeorgiev","download_url":"https://codeload.github.com/hggeorgiev/CentroUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252782552,"owners_count":21803401,"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":["oculus","react","reactvr","rift","ui-components","uikit","virtual-reality","vive","webvr","webvr-framework"],"created_at":"2024-08-03T00:01:06.438Z","updated_at":"2025-05-07T05:32:00.496Z","avatar_url":"https://github.com/hggeorgiev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/centro-ui.svg)](https://badge.fury.io/js/centro-ui) \n\n\u003ch1 align=\"center\"\u003eCentroUI\u003c/h1\u003e\n\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/Centroida/CentroUI/raw/master/centroui.png\" height=\"200\"\u003e\n\u003c/div\u003e\n\n\u003ch5 align=\"center\"\u003e\nUI components for WebVR\n\u003c/h5\u003e\n\n\n\u003c/div\u003e\n\n**CentroUI** is a set of reusable and extendable UI components and utilities for building interfaces for WebVR applications. Based on [React VR](https://github.com/facebook/react-vr), CentroUI gives developers with plug-and-play text input controls, cards, lists, navigation items and grids, all built with cross-device and cross-browser compatibility to ensure consistent experience with any environment and device.\n\n### This project is still in a very early stage. Do not use in production. [Contributions are welcome!](https://github.com/Centroida/CentroUI#contributing)\n\n## Resources\n* [Wiki](https://centroida.github.io/CentroUI/)\n* [Example](https://github.com/Centroida/CentroUI#example)\n\n## Getting started \n\nIn your [React VR](https://facebook.github.io/react-vr/docs/getting-started.html#content) project:\n\n0. __Make sure you have the right dependency versions__\n\n```\n    \"ovrui\": \"1.4.0\",\n    \"react\": \"15.4.1\",\n    \"react-native\": \"0.42.0\",\n    \"three\": \"0.80.1\",\n    \"react-vr\": \"1.4.0\",\n    \"react-vr-web\": \"1.4.0\"\n```\nIf you don't have the correct dependency issues, you may encounter issues when importing components in your projects.\n1. __Install via npm__\n```\nnpm install centro-ui --save\n```\n\n2. __Import in your project__\n\n```\nimport { Container } from 'centro-ui';\n```\n\n3. __Invoke the component(s) in your view__\n\n```\n\u003cContainer\u003e \u003c/Container\u003e\n```\n\n4.  __Add interactivity__\n\nIn your `vr/client.js` file, add the following:\n\n\n```\n// Import CnRayCaster and THREE.js\nimport CnRayCaster from \"centro-ui/utilities/cn-raycaster\";\nimport * as THREE from 'three'\n\nfunction init(bundle, parent, options) {\n    // Initialize a new Scene\n    const scene = new THREE.Scene();\n    const vr = new VRInstance(bundle, 'YourProjectName', parent, {\n        // Add a raycaster array and initialize the CnRayCaster\n        raycasters: [\n            new CnRayCaster(scene)\n        ],\n        // Enable cursor visibility\n        cursorVisibility: \"visible\", \n\n        scene: scene,\n        ...options,\n    });\n\n //...\n}\n```\n[Having trouble adding a raycaster?](https://github.com/Centroida/CentroUI/wiki/Raycaster)\n\n\n\n**[Read the documentation to learn more about the API](https://centroida.github.io/CentroUI/)**\n\n\n## Example\n#### [Live demo](https://www.centroida.co/vr/demo)\n\n\n![Video](http://i.imgur.com/ElGHkgj.gif)\n![Screenshot](http://i.imgur.com/rX8LX1f.png)\n\n\n#### Markup\n```\n            \u003cView\u003e\n                \u003cPano source={asset('bg3.jpg')}/\u003e\n\n\n                /* Container acts as a screen that contains all components. Can be placed in different directions */\n                \u003cContainer backgroundColor=\"transparent\"\u003e\n\n                    /* Add a navbar  */\n                    \u003cNavbar\u003e\n                        \u003cCnNavItem\u003e\n                            Hello CentroUI\n                        \u003c/CnNavItem\u003e\n\n                        \u003cCnNavItem\u003e\n                            Home\n                        \u003c/CnNavItem\u003e\n\n                        \u003cCnNavItem\u003e\n                            Home\n                        \u003c/CnNavItem\u003e\n\n                        \u003cCnNavItem\u003e\n                            Home\n                        \u003c/CnNavItem\u003e\n                    \u003c/Navbar\u003e\n\n                    /* CnRow contains all items in a given row */\n                    \u003cCnRow\u003e\n                        /* List different items */\n                        \u003cList\u003e\n                            \u003cListItem\u003e\n                                List Item 1\n                            \u003c/ListItem\u003e\n\n                            \u003cListItem\u003e\n                                List Item 2\n                            \u003c/ListItem\u003e\n                        \u003c/List\u003e\n\n                        /* Simple card for displaying different types of content */\n                        \u003cCnCard\u003e\n                            \u003cCnCardHeader\u003e\n                                I'm a card\n                            \u003c/CnCardHeader\u003e\n                            \u003cCnCardContent\u003e\n                                \u003cImage\n                                    style={{height: 1, flex: 1}}\n                                    source={{uri: 'https://static.tumblr.com/b48527ebdd851b3702aa6c22c8a2e759/wep4qmm/UMqojjbux/tumblr_static_tumblr_static_filename_640.jpg'}}/\u003e\n                            \u003c/CnCardContent\u003e\n                            \u003cCnCardHeader\u003e\n                                Synthwave\n                            \u003c/CnCardHeader\u003e\n\n                        \u003c/CnCard\u003e\n\n                    \u003c/CnRow\u003e\n                    \u003cCnRow\u003e\n                        \u003cCnCard\u003e\n                            \u003cCnCardHeader\u003e\n                                Card 2\n                            \u003c/CnCardHeader\u003e\n                            \u003cCnCardFooter\u003e\n                                \u003cText color=\"black\"\u003e Footer!\u003c/Text\u003e\n                            \u003c/CnCardFooter\u003e\n                        \u003c/CnCard\u003e\n                    \u003c/CnRow\u003e\n                \u003c/Container\u003e\n\n            \u003c/View\u003e\n```\n\n## Contributing\nIf you're interested in contributing to the CentroUI, we'd love to have you involved. CentroUI is open to contributors of all skill levels and we are ready and willing to help beginners work through issues. Please read the guidelines for contributing before doing so. We're also looking forward to learn which features and use cases you're interested to see in the future so that we know what to focus on. \n\nIf you don't want to write code or you don't have a lot of spare time, you still can help! Testing the various demos to make sure we haven't broken any features and filing issues when we do is very important.\n\nAnother way you can support this project is by [hiring us](https://www.centroida.co/contact.html). We will do our best to enable you to fully utilize our component library and find the shortest path to developing your WebVR project.\n\n## Community\n-  Follow us on [Twitter](https://twitter.com/Centro_UI) to get the most recent updates and examples\n\n## License Information\n\nThis project has been released under the [Apache License, version 2.0](http://www.apache.org/licenses/LICENSE-2.0.html), the text of which is included below. This license applies ONLY to the source of this repository and does not extend to any other CentroUI distribution or variant, or any other 3rd party libraries used in a repository. For licensing information about CentroUI, see the [License Agreements page (Coming Soon)]() at [CentroUI.com](http://www.centroui.com).\n\n\u003e Copyright © 2017 Centroida\n\n\u003e Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n\u003e [http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)\n\n\u003e  Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhggeorgiev%2FCentroUI","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhggeorgiev%2FCentroUI","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhggeorgiev%2FCentroUI/lists"}