tessl/npm-react-spring--web

React DOM support for the react-spring animation library with spring-physics based animations

—

Pending

Overview

Eval results

Files

Animated Components

Name: tessl/npm-react-spring--web
Author: tessl

Core animated DOM elements supporting all HTML and SVG tags with spring-powered animations. All standard DOM elements can be animated using the animated namespace.

Capabilities

Animated Function

Creates animated versions of React components with spring animation support.

/**
 * Creates an animated version of a React component
 * @param component - React component or HTML tag name
 * @returns Animated component with spring animation capabilities
 */
function animated<T extends ElementType>(component: T): AnimatedComponent<T>;

Usage Examples:

import { animated } from "@react-spring/web";

// Animate custom components
const AnimatedCustomComponent = animated(MyComponent);

// Use animated custom component
<AnimatedCustomComponent style={{ opacity: springValue }} />

HTML Element Primitives

All standard HTML elements are available as animated primitives.

const animated: {
  // Common HTML elements
  div: AnimatedComponent<'div'>;
  span: AnimatedComponent<'span'>;
  p: AnimatedComponent<'p'>;
  button: AnimatedComponent<'button'>;
  input: AnimatedComponent<'input'>;
  img: AnimatedComponent<'img'>;
  
  // Form elements
  form: AnimatedComponent<'form'>;
  label: AnimatedComponent<'label'>;
  textarea: AnimatedComponent<'textarea'>;
  select: AnimatedComponent<'select'>;
  option: AnimatedComponent<'option'>;
  
  // List elements
  ul: AnimatedComponent<'ul'>;
  ol: AnimatedComponent<'ol'>;
  li: AnimatedComponent<'li'>;
  
  // Table elements
  table: AnimatedComponent<'table'>;
  thead: AnimatedComponent<'thead'>;
  tbody: AnimatedComponent<'tbody'>;
  tr: AnimatedComponent<'tr'>;
  td: AnimatedComponent<'td'>;
  th: AnimatedComponent<'th'>;
  
  // Semantic elements
  header: AnimatedComponent<'header'>;
  nav: AnimatedComponent<'nav'>;
  main: AnimatedComponent<'main'>;
  section: AnimatedComponent<'section'>;
  article: AnimatedComponent<'article'>;
  aside: AnimatedComponent<'aside'>;
  footer: AnimatedComponent<'footer'>;
  
  // Media elements
  video: AnimatedComponent<'video'>;
  audio: AnimatedComponent<'audio'>;
  canvas: AnimatedComponent<'canvas'>;
  
  // All other HTML elements...
  a: AnimatedComponent<'a'>;
  abbr: AnimatedComponent<'abbr'>;
  address: AnimatedComponent<'address'>;
  area: AnimatedComponent<'area'>;
  b: AnimatedComponent<'b'>;
  base: AnimatedComponent<'base'>;
  bdi: AnimatedComponent<'bdi'>;
  bdo: AnimatedComponent<'bdo'>;
  big: AnimatedComponent<'big'>;
  blockquote: AnimatedComponent<'blockquote'>;
  body: AnimatedComponent<'body'>;
  br: AnimatedComponent<'br'>;
  caption: AnimatedComponent<'caption'>;
  cite: AnimatedComponent<'cite'>;
  code: AnimatedComponent<'code'>;
  col: AnimatedComponent<'col'>;
  colgroup: AnimatedComponent<'colgroup'>;
  data: AnimatedComponent<'data'>;
  datalist: AnimatedComponent<'datalist'>;
  dd: AnimatedComponent<'dd'>;
  del: AnimatedComponent<'del'>;
  details: AnimatedComponent<'details'>;
  dfn: AnimatedComponent<'dfn'>;
  dialog: AnimatedComponent<'dialog'>;
  dl: AnimatedComponent<'dl'>;
  dt: AnimatedComponent<'dt'>;
  em: AnimatedComponent<'em'>;
  embed: AnimatedComponent<'embed'>;
  fieldset: AnimatedComponent<'fieldset'>;
  figcaption: AnimatedComponent<'figcaption'>;
  figure: AnimatedComponent<'figure'>;
  h1: AnimatedComponent<'h1'>;
  h2: AnimatedComponent<'h2'>;
  h3: AnimatedComponent<'h3'>;
  h4: AnimatedComponent<'h4'>;
  h5: AnimatedComponent<'h5'>;
  h6: AnimatedComponent<'h6'>;
  head: AnimatedComponent<'head'>;
  hgroup: AnimatedComponent<'hgroup'>;
  hr: AnimatedComponent<'hr'>;
  html: AnimatedComponent<'html'>;
  i: AnimatedComponent<'i'>;
  iframe: AnimatedComponent<'iframe'>;
  ins: AnimatedComponent<'ins'>;
  kbd: AnimatedComponent<'kbd'>;
  keygen: AnimatedComponent<'keygen'>;
  legend: AnimatedComponent<'legend'>;
  link: AnimatedComponent<'link'>;
  map: AnimatedComponent<'map'>;
  mark: AnimatedComponent<'mark'>;
  menu: AnimatedComponent<'menu'>;
  menuitem: AnimatedComponent<'menuitem'>;
  meta: AnimatedComponent<'meta'>;
  meter: AnimatedComponent<'meter'>;
  noscript: AnimatedComponent<'noscript'>;
  object: AnimatedComponent<'object'>;
  optgroup: AnimatedComponent<'optgroup'>;
  output: AnimatedComponent<'output'>;
  param: AnimatedComponent<'param'>;
  picture: AnimatedComponent<'picture'>;
  pre: AnimatedComponent<'pre'>;
  progress: AnimatedComponent<'progress'>;
  q: AnimatedComponent<'q'>;
  rp: AnimatedComponent<'rp'>;
  rt: AnimatedComponent<'rt'>;
  ruby: AnimatedComponent<'ruby'>;
  s: AnimatedComponent<'s'>;
  samp: AnimatedComponent<'samp'>;
  script: AnimatedComponent<'script'>;
  small: AnimatedComponent<'small'>;
  source: AnimatedComponent<'source'>;
  strong: AnimatedComponent<'strong'>;
  style: AnimatedComponent<'style'>;
  sub: AnimatedComponent<'sub'>;
  summary: AnimatedComponent<'summary'>;
  sup: AnimatedComponent<'sup'>;
  tfoot: AnimatedComponent<'tfoot'>;
  time: AnimatedComponent<'time'>;
  title: AnimatedComponent<'title'>;
  track: AnimatedComponent<'track'>;
  u: AnimatedComponent<'u'>;
  var: AnimatedComponent<'var'>;
  wbr: AnimatedComponent<'wbr'>;
};

SVG Element Primitives

All standard SVG elements are available as animated primitives.

const animated: {
  // SVG container elements
  svg: AnimatedComponent<'svg'>;
  g: AnimatedComponent<'g'>;
  defs: AnimatedComponent<'defs'>;
  
  // SVG shapes
  circle: AnimatedComponent<'circle'>;
  ellipse: AnimatedComponent<'ellipse'>;
  rect: AnimatedComponent<'rect'>;
  path: AnimatedComponent<'path'>;
  polygon: AnimatedComponent<'polygon'>;
  polyline: AnimatedComponent<'polyline'>;
  line: AnimatedComponent<'line'>;
  
  // SVG text
  text: AnimatedComponent<'text'>;
  tspan: AnimatedComponent<'tspan'>;
  
  // SVG gradients and patterns
  linearGradient: AnimatedComponent<'linearGradient'>;
  radialGradient: AnimatedComponent<'radialGradient'>;
  pattern: AnimatedComponent<'pattern'>;
  stop: AnimatedComponent<'stop'>;
  
  // SVG utility elements
  clipPath: AnimatedComponent<'clipPath'>;
  mask: AnimatedComponent<'mask'>;
  image: AnimatedComponent<'image'>;
  foreignObject: AnimatedComponent<'foreignObject'>;
};

Animated Component Type

The type of animated components created by the animated function.

type AnimatedComponent<T extends ElementType> = ForwardRefExoticComponent<
  AnimatedProps<Merge<ComponentPropsWithRef<T>, { style?: StyleProps }>> &
  FluidProps<{
    scrollTop?: number;
    scrollLeft?: number;
    viewBox?: string;
  }>
>;

type AnimatedProps<Props extends object> = {
  [P in keyof Props]: P extends 'ref' | 'key'
    ? Props[P]
    : AnimatedProp<Props[P]>;
};

Animated Alias

Shorthand alias for the animated namespace.

const a: typeof animated;

Usage Examples:

import { animated, a, useSpring } from "@react-spring/web";

function AnimatedBox() {
  const styles = useSpring({
    from: { opacity: 0, transform: 'scale(0.8)' },
    to: { opacity: 1, transform: 'scale(1)' },
  });

  return (
    <>
      {/* Full syntax */}
      <animated.div style={styles}>Animated with animated.div</animated.div>
      
      {/* Shorthand syntax */}
      <a.div style={styles}>Animated with a.div</a.div>
      
      {/* SVG animation */}
      <a.svg width="100" height="100">
        <a.circle 
          cx="50" 
          cy="50" 
          r={styles.opacity.to(o => o * 40)}
          fill="blue"
        />
      </a.svg>
    </>
  );
}

Special Properties

Animated components support special properties for DOM interaction:

Scroll Properties

interface ScrollProps {
  /** Vertical scroll position */
  scrollTop?: number;
  /** Horizontal scroll position */
  scrollLeft?: number;
}

SVG Properties

interface SVGProps {
  /** SVG viewBox attribute */
  viewBox?: string;
}

Usage Examples:

// Animated scrolling
const scrollStyles = useSpring({
  scrollTop: showContent ? 200 : 0,
});

<a.div style={scrollStyles} className="scrollable-container">
  Content...
</a.div>

// Animated SVG viewBox
const svgStyles = useSpring({
  viewBox: isZoomed ? "0 0 100 100" : "0 0 200 200",
});

<a.svg style={svgStyles}>
  <a.rect width="50" height="50" />
</a.svg>

Install with Tessl CLI