HooksPro

useGlide

Lets hover marks glide from point to point and fade out in place, instead of jumping or vanishing.

Give it the active index (or ). keeps the last active point while the marks fade out, says whether they show, and is true for the one frame they appear, so they jump into place the first time and glide from then on. Pair it with , an SVG group that moves by a CSS transform on the token and the entrance curve.

Import

tsx

import { useGlide } from "@wunderui/react/charts"

Comes with WunderUI Core and Pro, in the entry of the package from your plan. See the plans.

Signature

useGlide(active: number | null): Glide

Parameters

Parameter	Type
active	number \| null

Returns

Field	Type
indexIndex to draw the hover marks at (the active one, or the last one while fading out).	number \| null
visible	boolean
snapTrue for the frame the marks appear: they jump into place instead of gliding from the old spot.	boolean

Examples

A gliding hover dot in a custom SVG chart

tsx

import { GlideGroup, useGlide } from "@wunderui/react/charts"

function HoverDot({ active, points }: { active: number | null; points: { x: number; y: number }[] }) {
  const glide = useGlide(active)
  const p = points[glide.index ?? 0]
  return (
    <GlideGroup x={p.x} y={p.y} visible={glide.visible} snap={glide.snap}>
      <circle r={5} fill="var(--chart-1)" className="stroke-card" strokeWidth={2} />
    </GlideGroup>
  )
}

Notes

Under reduced motion only fades; it does not move.
Only and animate, so a gliding mark never causes layout work.
Give the marks ; the chart's live region announces the active point.

PrevioususeDensity NextuseInViewAppear