{"id":20430749,"url":"https://github.com/whitestormjs/react-whs","last_synced_at":"2025-07-24T22:05:27.859Z","repository":{"id":57347697,"uuid":"80479464","full_name":"WhitestormJS/react-whs","owner":"WhitestormJS","description":"WhitestormJS React integration ⚛","archived":false,"fork":false,"pushed_at":"2018-03-26T18:28:11.000Z","size":338,"stargazers_count":99,"open_issues_count":5,"forks_count":18,"subscribers_count":21,"default_branch":"master","last_synced_at":"2024-09-21T06:41:44.411Z","etag":null,"topics":["components","integration","react","reactjs","whitestormjs","whitestormjs-react","whs"],"latest_commit_sha":null,"homepage":"https://whsjs.readme.io/docs","language":"JavaScript","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/WhitestormJS.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-01-31T00:58:03.000Z","updated_at":"2024-09-17T04:42:09.000Z","dependencies_parsed_at":"2022-08-28T01:40:19.187Z","dependency_job_id":null,"html_url":"https://github.com/WhitestormJS/react-whs","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WhitestormJS%2Freact-whs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WhitestormJS%2Freact-whs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WhitestormJS%2Freact-whs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WhitestormJS%2Freact-whs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WhitestormJS","download_url":"https://codeload.github.com/WhitestormJS/react-whs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224748517,"owners_count":17363312,"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":["components","integration","react","reactjs","whitestormjs","whitestormjs-react","whs"],"created_at":"2024-11-15T08:08:50.439Z","updated_at":"2024-11-15T08:08:51.183Z","avatar_url":"https://github.com/WhitestormJS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](http://i.imgur.com/MJmzMdb.png)\n\n# react-whs [![Build Status](https://img.shields.io/travis/WhitestormJS/react-whs.svg?style=flat-square)](https://travis-ci.org/WhitestormJS/react-whs) [![NPM Version](https://img.shields.io/npm/v/react-whs.svg?style=flat-square)](https://www.npmjs.com/package/react-whs)\n\n\u003e Go to [WhitestormJS/whitestorm.js](https://github.com/WhitestormJS/whitestorm.js)\n\n## Usage \n\nTry with **React** on [**Codepen**](http://codepen.io/sasha240100/pen/dNqKMd?editors=1010):\n\n\u003ca href=\"http://codepen.io/sasha240100/pen/dNqKMd?editors=1010\"\u003e\u003cimg src=\"http://i.imgur.com/AcsnqTs.png\" height=\"50\" /\u003e\u003c/a\u003e\n\n\n```javascript\nimport React, {Component} from 'react';\nimport {App, Sphere} from 'react-whs';\n\nexport class Application extends Component {\n  render() {\n    return (\n      \u003cApp modules={[\n        new WHS.app.SceneModule(),\n        new WHS.app.CameraModule({\n          position: {\n            z: 20\n          }\n        }),\n        new WHS.app.RenderingModule(),\n        new WHS.controls.OrbitModule()\n      ]}\u003e\n        \u003cSphere\n          geometry={[3, 32, 32]}\n          material={new THREE.MeshBasicMaterial({color: 0xffffff})}\n        /\u003e\n      \u003c/App\u003e\n    )\n  }\n}\n```\n\n### Children\n\n```javascript\nimport React, {Component} from 'react';\nimport {App, Sphere} from 'react-whs';\n\nexport class Application extends Component {\n  render() {\n    return (\n      \u003cApp modules={[\n        // ...\n      ]}\u003e\n        \u003cSphere\n          geometry={[3, 32, 32]}\n          material={new THREE.MeshBasicMaterial({color: 0xffffff})}\n        \u003e\n          \u003cBox\n            geometry={[2, 2, 2]}\n            material={new THREE.MeshBasicMaterial({color: 0xff0000})}\n            position={[5, 5, 2]}\n          \u003e\n        \u003c/Sphere\u003e\n      \u003c/App\u003e\n    )\n  }\n}\n```\n\n## How whs components can be transformed to react components\n\n### Custom components (that are not included in whs lib)\n\n\u003e Simply include `@reactify` decorator.\n\n```javascript\nimport React, {Component} from 'react';\nimport * as THREE from 'three';\nimport {MeshComponent} from 'whs/src/core/MeshComponent';\n\nimport {reactify} from 'react-whs';\n\n@reactify\nexport default class BasicSphere extends MeshComponent {\n  build() {\n    return new THREE.Mesh(\n      new THREE.SphereGeometry(3, 16, 16),\n      new THREE.MeshBasicMaterial({color: 0xff0000}) // red\n    );\n  }\n}\n```\n\n### Get reference to Component/App to work with them in js\nFor **App** use `refApp`.\n\nFor **any component (Mesh, Light, Camera, ...)** use `refComponent`.\n\n```javascript\nimport React, {Component} from 'react';\nimport {App, Sphere} from 'react-whs';\n\nexport class Application extends Component {\n  render() {\n    return (\n      \u003cApp modules={[\n        // ...\n        refApp={app =\u003e {\n          console.log(app); // will log this WHS.App object\n        }}\n      ]}\u003e\n        \u003cSphere\n          geometry={[3, 32, 32]}\n          material={new THREE.MeshBasicMaterial({color: 0xffffff})}\n          refComponent={component =\u003e {\n            console.log(component); // will log this WHS.Sphere object\n          }}\n        /\u003e\n      \u003c/App\u003e\n    )\n  }\n}\n```\n\n\n\n### Properties/params syntax\n\u003e To see how to make whs components work in react see previous note (Custom components)\n\nWHS:\n\n```javascript\nconst component = new MyComponent({\n  parameter1: value1,\n  parameter2: value2,\n  position: new THREE.Vector3(x, y, z)\n});\n\ncomponent.addTo(app);\n```\n\nReact:\n\n```javascript\nclass MyComponentSyntaxExample {\n  render() {\n    return (\n      \u003cMyComponent\n        parameter1={value1}\n        parameter2={value2}\n        position={[x, y, z]}\n      /\u003e\n    )\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhitestormjs%2Freact-whs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhitestormjs%2Freact-whs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhitestormjs%2Freact-whs/lists"}