Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/whitestormjs/react-whs
WhitestormJS React integration ⚛
https://github.com/whitestormjs/react-whs
components integration react reactjs whitestormjs whitestormjs-react whs
Last synced: 2 months ago
JSON representation
WhitestormJS React integration ⚛
- Host: GitHub
- URL: https://github.com/whitestormjs/react-whs
- Owner: WhitestormJS
- Created: 2017-01-31T00:58:03.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-26T18:28:11.000Z (almost 7 years ago)
- Last Synced: 2024-09-21T06:41:44.411Z (4 months ago)
- Topics: components, integration, react, reactjs, whitestormjs, whitestormjs-react, whs
- Language: JavaScript
- Homepage: https://whsjs.readme.io/docs
- Size: 330 KB
- Stars: 99
- Watchers: 21
- Forks: 18
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-whs [](https://travis-ci.org/WhitestormJS/react-whs) [](https://www.npmjs.com/package/react-whs)
> Go to [WhitestormJS/whitestorm.js](https://github.com/WhitestormJS/whitestorm.js)
## Usage
Try with **React** on [**Codepen**](http://codepen.io/sasha240100/pen/dNqKMd?editors=1010):
```javascript
import React, {Component} from 'react';
import {App, Sphere} from 'react-whs';
export class Application extends Component {
render() {
return (
)
}
}
```
### Children
```javascript
import React, {Component} from 'react';
import {App, Sphere} from 'react-whs';
export class Application extends Component {
render() {
return (
)
}
}
```
## How whs components can be transformed to react components
### Custom components (that are not included in whs lib)
> Simply include `@reactify` decorator.
```javascript
import React, {Component} from 'react';
import * as THREE from 'three';
import {MeshComponent} from 'whs/src/core/MeshComponent';
import {reactify} from 'react-whs';
@reactify
export default class BasicSphere extends MeshComponent {
build() {
return new THREE.Mesh(
new THREE.SphereGeometry(3, 16, 16),
new THREE.MeshBasicMaterial({color: 0xff0000}) // red
);
}
}
```
### Get reference to Component/App to work with them in js
For **App** use `refApp`.
For **any component (Mesh, Light, Camera, ...)** use `refComponent`.
```javascript
import React, {Component} from 'react';
import {App, Sphere} from 'react-whs';
export class Application extends Component {
render() {
return (
{
console.log(app); // will log this WHS.App object
}}
]}>
{
console.log(component); // will log this WHS.Sphere object
}}
/>
)
}
}
```
### Properties/params syntax
> To see how to make whs components work in react see previous note (Custom components)
WHS:
```javascript
const component = new MyComponent({
parameter1: value1,
parameter2: value2,
position: new THREE.Vector3(x, y, z)
});
component.addTo(app);
```
React:
```javascript
class MyComponentSyntaxExample {
render() {
return (
)
}
}
```