@joint/react/dist/types/hooks/use-links.d.ts

React bindings and hooks for JointJS to build interactive diagrams and graphs.

import type { GraphLink } from '../types/link-types';
import type { CellMap } from '../utils/cell/cell-map';
/**
 * A hook to access the graph store's links.
 *
 * This hook returns the selected links from the graph store. It accepts:
 * - a selector function, which extracts the desired portion from the links map.
 * (By default, it returns all links.)
 * - an optional `isEqual` function, used to compare previous and new values to prevent unnecessary re-renders.
 *
 * How it works:
 * 1. The hook subscribes to the links of the graph store.
 * 2. It retrieves the links and then applies the selector.
 * 3. The `isEqual` comparator (defaulting to a deep comparison) checks if the selected value has really changed.
 * @example
 * ```ts
 * // Using without a selector (returns all links):
 * const links = useLinks();
 * ```
 * @example
 * ```ts
 * // Using with a selector (extract part of the links data):
 * const linkIds = useLinks((links) => links.map(link => link.id));
 * ```
 * @example
 * // Using with a custom isEqual function:
 * ```ts
 * const filteredLinks = useLinks(
 *   (links) => links,
 *   (prev, next) => prev.length === next.length
 * );
 * ```
 * @group Hooks
 * @param selector - A function to select a portion of the links.
 * @param isEqual - A function to compare the previous and new values.
 * @returns - The selected links.
 */
export declare function useLinks<Link extends GraphLink = GraphLink, SelectorReturnType = Link[]>(selector?: (items: CellMap<Link>) => SelectorReturnType, isEqual?: (a: SelectorReturnType, b: SelectorReturnType) => boolean): SelectorReturnType;