React adapter

Import React bindings from @baolq/svg-motion/react. The root entry stays React-free.

Component

import { SvgMotion } from "@baolq/svg-motion/react";

<SvgMotion
  source="/diagram.svg"
  preset="draw"
  autoplay
  svgProps={{ "aria-label": "Architecture diagram" }}
/>;

The forwarded ref exposes svg and controller. Lifecycle callbacks include onReady, onFinish, onCancel and onError.

Hook

useSvgMotion(options) returns containerRef, svg, controller, status, error and diagnostics.

const motion = useSvgMotion({ source, preset: "scale", autoplay: false });
return <div ref={motion.containerRef} />;

SSR

Importing the React entry is DOM-free and SSR-safe. Preparation and animation start only after a browser container mounts.

Related

• Getting started
• Motion system
• Accessibility guide