idyll-regl-component
v1.0.6
Published
Component base class to make it easy to integrate regl into Idyll projects
Downloads
6
Readme
idyll-regl-component
Component base class to make it easy to integrate regl into Idyll projects
Installation
npm install --save idyll-regl-component
Usage
const React = require('react');
const ReglComponent = require('idyll-regl-component');
const regl = require('regl');
class CustomReglComponent extends ReglComponent {
initialize(r, node) {
// set the width, height of node
//...
// then
const regl = r(node);
// your regl code here
}
}
module.exports = CustomReglComponent;
In .idl file:
[CustomReglComponent someProp:someData /]
In order to use this component, you just need to define initialize
.
iniatialize(multiRegl, node)
The initialize function is called only once when your component first mounts. Use this function to set up regl's draw loop.
update(props)
This function is called any time the props object changes. Use this function e.g. to update
your component when some property changes. Note, for most cases you shouldn't need to use the
update
function.
Options
Anything you pass to your component will be available on the props object. E.g.
In .idl file:
[CustomReglComponent someProperty:"abc" someOtherProperty:"xyz" /]
class CustomReglComponent extends ReglComponent {
initialize(r, node) {
// this.props:
// {
// someProperty: "abc",
// someOtherProperty: "xyz"
// }
//...
}
update(props){/**/}
}
module.exports = CustomReglComponent;
className
A css class name can be provided.
Sets the className:
[CustomReglComponent className:"regl-viz" /]