useAdaptableState hook

import { useAdaptableState } from '@adaptabletools/adaptable-infinite-react';

You can use this hook in any component rendered inside the <Adaptable.Provider /> component.

It gives you access to the Adaptable state, or to a specific part of the state.

Note

For listening to state changes, use useAdaptableStateSubscribe.

Demo on how to leverage useAdaptableState hook
Fork

This example shows how to leverage useAdaptableState to access the Adaptable state from different places of your app.

The current view is retrieved from state and used in two places:

  • to display the current view name in the UI, above the Adaptable UI
  • to display the current view name in the header of the "Framework" column.

Change the view to see the UI and the column header update.

Usage

You can use it in two ways:

  • without arguments, to get the whole Adaptable state
const adaptableState = useAdaptableState();
  • with a selector function, to get a specific part of the Adaptable state
const currentViewId = useAdaptableState((state) => state.view.currentViewId);

Passing the optional fn parameter is allows you to select which part of the state you're interested in.

For example, you can get the id of the current view or you can get the currently applied theme.

Getting the id of the currently active view
const viewId = useAdaptableState((state) => state.view.currentViewId);
PreviousAdapTable HooksNextuseAdaptableStateSubscribe