RenderTarget
[Back to readme](README.md)
The `` component will create a WebGL RenderTarget (or Frame Buffer Object), acting as a wrapper for the curtains.js RenderTarget class.
#### Usage
```jsx
import ReactDOM from 'react-dom';
import React from 'react';
import {RenderTarget} from 'react-curtains';
function BasicRenderTarget({children}) {
return (
{children}
);
}
```
#### Properties
##### Regular parameters & properties
You can pass any of the RenderTarget class parameters as a React prop to your component.
```jsx
{children}
```
##### uniqueKey property
Sometimes you'll want to apply your render target to multiple planes (usually combined with a [ShaderPass](shader-pass.md)), and it may be easier to add your render target inside a loop. You can pass an additional `uniqueKey` prop to your `` component and it will be created just once:
```jsx
import ReactDOM from 'react-dom';
import React from 'react';
import {RenderTarget, ShaderPass} from 'react-curtains';
import BasicPlane from './components/BasicPlane'; // a basic plane component
function SelectivePlanesPass({planeElements}) {
return (
{planeElements.map((planeEl) => {
})}
);
}
```
##### autoDetectChildren property
By default, the `` component will loop through all its children and assign itself as the `target` prop of all `` and `` children it will found.
If you want to prevent this behaviour and handle this by yourself, just set its `autoDetectChildren` prop to false:
```jsx
{children}
```
#### Event
The `` component provides an additional `onReady` event fired once the render target has been created:
```jsx
import ReactDOM from 'react-dom';
import React from 'react';
import {RenderTarget} from 'react-curtains';
function BasicRenderTarget({children}) {
const onRenderTargetReady = (renderTarget) => {
console.log("render target is ready!", renderTarget);
// you have access to the render target method here
const renderTexture = renderTarget.getTexture();
};
return (
{children}
);
}
```
#### Unmounting
Each time the `` component will unmount, the corresponding WebGL render target element will be automatically disposed.