You can utilize the useDeckgl hook in any host context, meaning that it is not restricted to just the children of . You can leverage inside of regular react-dom areas of your application as well.

`jsx
import { useDeckgl } from '@deckgl-fiber-renderer/dom';

function MyComponent() {
// Will automatically update once Deckgl is initialized
const deckglInstance = useDeckgl();

useEffect(() => {
// Recommended to always check to make sure it exists before using
if (deckglInstance) {
...
}
}, []);

return ...
}
`

---

$3

> [!CAUTION]
> The

- Example with react-map-gl component
- Example with maplibre-gl standalone

---

$3

> [!IMPORTANT]
> There is no automatic layer filtering applied based on what View it is nested under in the tree. However, this is something we may add in the future as an opt-in feature.

All of the baked in Views are supported:

`jsx





`

`jsx





`

---

$3

> [!NOTE]
> This code is included in the examples/custom-layer example.

Adding custom layers to @deckg-fiber-renderer is straightforward. First create a file that contains the custom layer:

`ts
// custom-layer.ts
import { CompositeLayer, type DefaultProps } from '@deck.gl/core';
import { ScatterplotLayer, type ScatterplotLayerProps } from '@deck.gl/layers';

export type CustomLayerProps = ScatterplotLayerProps & {
scaler: number;
};

export class CustomLayer extends CompositeLayer {
static layerName = 'CustomLayer';
static defaultProps: DefaultProps = {
scaler: 1.0,
};

renderLayers() {
const props = this.props;

return [
new ScatterplotLayer(
this.getSubLayerProps({
...props,
id: 'scaled',
data: props.data,
radiusScale: props.scaler,
opacity: 0.25,
}),
),
new ScatterplotLayer(
this.getSubLayerProps({
...props,
data: props.data,
id: 'not-scaled',
}),
),
];
}
}
`

If you are using TypeScript add the following at the bottom of the file to make TypeScript & React aware of this custom JSX element:

`ts
// Make TypeScript & React aware of this custom JSX element
declare global {
namespace React {
namespace JSX {
interface IntrinsicElements {
customLayer: CustomLayerProps;
}
}
}
}
`

Next create a file in your app that will act as the central hub for adding additional layers to the reconciler. This file needs to imported in a root level file that is always executed (like a Nextjs page/layout). More optimally you can import it nearest to the root of where you are rendering :

`ts
// side-effects.ts
import { extend } from '@deckgl-fiber-renderer/dom';
import { CustomLayer } from './path/to/my-custom-layer';

// Add custom layer(s) to reconciler
extend({
// jsx elements are transformed to PascalCase behind the scenes
// so becomes new CustomLayer()
CustomLayer,
});
`

Now you can use this layer anywhere in your JSX:

`jsx



``

If you included the TypeScript snippet, it will also have full intellisense support and type safety.