https://github.com/idyll-lang/idyll-regl-component

Component base class for REGL
https://github.com/idyll-lang/idyll-regl-component

Last synced: 14 days ago
JSON representation

Component base class for REGL

• Host: GitHub
• URL: https://github.com/idyll-lang/idyll-regl-component
• Owner: idyll-lang
• License: mit
• Created: 2017-04-10T04:10:24.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-10T17:34:17.000Z (over 6 years ago)
• Last Synced: 2024-10-30T00:54:57.881Z (21 days ago)
• Language: JavaScript
• Homepage: https://idyll-lang.github.io/idyll-regl-component/
• Size: 360 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

```jsx

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"  /]

```

```jsx

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" /]

```