TinyBase logoTinyBase

useMetric

The useMetric hook gets the current value of a Metric, and registers a listener so that any changes to that result will cause a re-render.

useMetric(
  metricId: string,
  metricsOrMetricsId?: MetricsOrMetricsId,
): number | undefined
TypeDescription
metricIdstring

The Id of the Metric.

metricsOrMetricsId?MetricsOrMetricsId

The Metrics object to be accessed: omit for the default context Metrics object, provide an Id for a named context Metrics object, or provide an explicit reference.

returnsnumber | undefined

The numeric value of the Metric, or undefined.

A Provider component is used to wrap part of an application in a context, and it can contain a default Metrics object or a set of Metrics objects named by Id. The useMetric hook lets you indicate which Metrics object to get data for: omit the optional final parameter for the default context Metrics object, provide an Id for a named context Metrics object, or provide a Metrics object explicitly by reference.

When first rendered, this hook will create a listener so that changes to the Metric will cause a re-render. When the component containing this hook is unmounted, the listener will be automatically removed.

Examples

This example creates a Metrics object outside the application, which is used in the useMetric hook by reference. A change to the Metric re-renders the component.

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createMetrics, createStore} from 'tinybase';
import {useMetric} from 'tinybase/ui-react';

const store = createStore().setTable('species', {
  dog: {price: 5},
  cat: {price: 4},
  worm: {price: 1},
});
const metrics = createMetrics(store);
metrics.setMetricDefinition('highestPrice', 'species', 'max', 'price');
const App = () => <span>{useMetric('highestPrice', metrics)}</span>;

const app = document.createElement('div');
createRoot(app).render(<App />);
console.log(app.innerHTML);
// -> '<span>5</span>'

store.setCell('species', 'horse', 'price', 20);
console.log(app.innerHTML);
// -> '<span>20</span>'

This example creates a Provider context into which a default Metrics object is provided. A component within it then uses the useMetric hook.

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createMetrics, createStore} from 'tinybase';
import {Provider, useMetric} from 'tinybase/ui-react';

const App = ({metrics}) => (
  <Provider metrics={metrics}>
    <Pane />
  </Provider>
);
const Pane = () => <span>{useMetric('highestPrice')}</span>;

const metrics = createMetrics(
  createStore().setTable('species', {
    dog: {price: 5},
    cat: {price: 4},
    worm: {price: 1},
  }),
).setMetricDefinition('highestPrice', 'species', 'max', 'price');

const app = document.createElement('div');
createRoot(app).render(<App metrics={metrics} />);
console.log(app.innerHTML);
// -> '<span>5</span>'

This example creates a Provider context into which a default Metrics object is provided. A component within it then uses the useMetric hook.

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createMetrics, createStore} from 'tinybase';
import {Provider, useMetric} from 'tinybase/ui-react';

const App = ({metrics}) => (
  <Provider metricsById={{petMetrics: metrics}}>
    <Pane />
  </Provider>
);
const Pane = () => <span>{useMetric('highestPrice', 'petMetrics')}</span>;

const metrics = createMetrics(
  createStore().setTable('species', {
    dog: {price: 5},
    cat: {price: 4},
    worm: {price: 1},
  }),
).setMetricDefinition('highestPrice', 'species', 'max', 'price');

const app = document.createElement('div');
createRoot(app).render(<App metrics={metrics} />);
console.log(app.innerHTML);
// -> '<span>5</span>'

Since

v1.0.0