shape-morphReact
React component and hooks API reference.
All React exports are available from the shape-morph/react entry point. Requires React 18+.
import { Shape, useMorph, useShape } from "shape-morph/react";
import type { ShapeName } from "shape-morph/react";<Shape>
<Shape name="Heart" size={32} fill="red" />Renders a shape as an inline <svg> element.
Prop
Type
useMorph
useMorph(start: ShapeName, end: ShapeName, options: MorphOptions): MorphResultAnimated morph hook. Runs a requestAnimationFrame loop with ease-in-out interpolation.
Options
Prop
Type
Returns
Prop
Type
The returned progress is the animated value, not the target. It smoothly interpolates toward the target using ease-in-out timing. Use it to drive synchronized animations:
const { clipPath, progress } = useMorph("Circle", "Heart", {
progress: hovered ? 1 : 0,
duration: 300,
});
<div style={{
clipPath,
transform: `rotate(${progress * 90}deg)`,
}} />useShape
useShape(name: ShapeName, size?: number): ShapeResultReturns path data for a static shape. No animation.
Returns
Prop
Type