overview.md

@deck.gl/react

This module integrates deck.gl with React. First-time deck.gl developers may find it helpful to read Using deck.gl with React before getting started.

This module contains the following:

React Components

• <DeckGL/>
• Widgets in the @deck.gl/widgets module are re-exported as React components in this module.
  • e.g. import { ZoomWidget } from '@deck.gl/react';

React Hooks

• useWidget

Installation

Install from NPM

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/react

import DeckGL from '@deck.gl/react';

<DeckGL initialViewState={{longitude: -122.45, latitude: 37.78, zoom: 12}}/>

Using React-wrapped Widgets

Here's a typical example of how to switch from using pure-js widgets in the @deck.gl/widgets module to their React-equivalent:

-import { ZoomWidget } from '@deck.gl/widgets';
+import { ZoomWidget } from '@deck.gl/react';

-<DeckGL widgets={[new ZoomWidget({})]}>
+<DeckGL>
+  <ZoomWidget/>
</DeckGL>

React props are passed to the widget:

-new ZoomWidget({ id: 'zoom', placement: 'top-right' })
+<ZoomWidget id='zoom' placement='top-right'/>