@mosaicajs/react¶

@mosaicajs/react connects the store from @mosaicajs/client to React. useMosaicaStore creates a store that lives as long as your component. useProjection reads one of the store's projections, the read-only snapshots it publishes of the map's state, and re-renders your component when that projection changes.

The elements of @mosaicajs/components, such as the map, are React components in the @mosaicajs/react/components entry, and you can pass them a store as the store prop. This entry imports neither Lit nor deck.gl, so a page that uses only the hooks does not load them.

Example¶

import {useMosaicaStore, useProjection} from '@mosaicajs/react';
import {MosaicaMap} from '@mosaicajs/react/components';

function Map({token}: {token: string}) {
  const store = useMosaicaStore({viewerUrl: 'http://localhost:8080', token});
  const status = useProjection(store, 'status');
  return (
    <>
      <MosaicaMap store={store} />
      <p>{status?.status}</p>
    </>
  );
}

Type Aliases¶

UseMosaicaStoreOptions¶

UseMosaicaStoreOptions = Omit\<StoreOptions, "authorise"> & object

The options of useMosaicaStore, which are those of createStore.

Type Declaration¶

Name	Type	Description
`authorise?`	`TokenSupplier`	A function that returns a viewer token, which the store calls at the start and before each token expires. You can pass an inline function: the hook calls the latest one and does not create a new store when it changes. A store serves one viewer. To show the map to another, call the store's `clear()` or give the component a new `key`.

Functions¶

useMosaicaStore()¶

useMosaicaStore(options: UseMosaicaStoreOptions): Store | null

Creates a store with createStore for the lifetime of the component, and disposes of it on unmount. The store is created in an effect, so the first render returns null.

The store is created again when viewerUrl, client, token or view changes, or when authorise is added or removed. Other options take effect the next time it is created. If you pass a client, keep it the same object across renders, for example with useMemo, or every render creates a new store. Options that createStore refuses, such as neither viewerUrl nor client, throw from the effect.

Returns¶

Store | null

useProjection()¶

Call Signature¶

useProjection\<K extends keyof Projections>(store: Store, name: K): Projections[K]

Returns one of the store's projections, and re-renders the component whenever that projection changes. Changes to other projections do not re-render it.

Parameters¶

Parameter	Type	Description
`store`	`Store`	The store, such as the one useMosaicaStore returns.
`name`	`K`	The projection to read, such as `marks` or `legend`.

Returns¶

Projections[K]

The projection, or null while store is null, as it is on the first render.

Call Signature¶

useProjection\<K extends keyof Projections>(store: Store | null, name: K): Projections[K] | null

Returns one of the store's projections, and re-renders the component whenever that projection changes. Changes to other projections do not re-render it.