Skip to main content

Function: useSelection()

useSelection<Row>(store): SelectionState<Row>

Defined in: packages/sdvplot/src/react/index.tsx:282

The state of a createSelection store (J31), re-rendering on every change and never on a no-op patch. On the server, and in the first client render, it reads the store's current state, so server and client markup agree. Redrawing from it is the component's choice: filter rows with state.predicate, emphasise state.selected.

Type Parameters​

Row​

Row

Parameters​

store​

SelectionStore<Row>

Returns​

SelectionState<Row>

Example​

import { createSelection } from "@sportsdataverse/sdvplot";
import { useSelection } from "@sportsdataverse/sdvplot/react";
import type { ReactElement } from "react";

const store = createSelection();
store.set({ selected: ["KC", "BUF"] });
function Picked(): ReactElement {
  const { selected } = useSelection(store); // re-renders on every change of the store
  return (
    <table>
      <tbody>
        {[...selected].map((id) => (
          <tr key={id}>
            <td>{id}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
<Picked />;