diff --git a/docs/api/Component.md b/docs/api/Component.md index 1c09b72..5c7b6a5 100644 --- a/docs/api/Component.md +++ b/docs/api/Component.md @@ -13,12 +13,28 @@ class MyEffect extends GL.Component { `GL.Component` allows to **compose** effects: it tells the `gl-react-core` algorithm to "unfold" the `render()` looking for a `GL.View` to merge with. -> Technically, this is not required to extend `GL.Component` (you can still use `React.Component`), -but this is generally a good idea (you always want to make a component "composable"). +> Although it is technically not required to extend `GL.Component` (you can still use `React.Component`), +this is generally a good idea because you always want to make a component "composable". ## Composing effects -Once you have defined your component that inject children, you can then compose it with another. +Effects component can be implemented as follow: + +```js +// Assuming we have defined a shaders.myEffect, where the frag have: +// a `tex` sampler2D uniform +// a `someParam` uniform +class MyEffect extends GL.Component { + render () { + const { width, height, children, someParam } = this.props; + return + {children} + ; + } +} +``` + +Once you have defined effect components that inject `children` (let's say `Blur` and `Negative`), you can compose them together. **Example:** @@ -30,7 +46,7 @@ Once you have defined your component that inject children, you can then compose ``` -and you can make generic component out of it: +and define another generic component out of it: ```js class BlurNegative extends GL.Component {