tessl/npm-rc-motion

React lifecycle controlled motion library for smooth enter/leave transitions and list animations

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

RC Motion

Name: tessl/npm-rc-motion
Author: tessl

RC Motion is a React lifecycle controlled motion library that provides smooth, performant animations for enter/leave transitions, appearance animations, and list animations. It offers both CSS-based animations through dynamic class names and JavaScript-controlled animations through callback hooks, with automatic cleanup and cross-browser compatibility.

Package Information

Package Name: rc-motion
Package Type: npm
Language: TypeScript
Installation: npm install rc-motion

Core Imports

import CSSMotion, { CSSMotionList, Provider } from "rc-motion";
import type { CSSMotionProps, CSSMotionListProps, MotionEventHandler } from "rc-motion";

For CommonJS:

const CSSMotion = require("rc-motion");
const { CSSMotionList, Provider } = require("rc-motion");

Basic Usage

import CSSMotion from "rc-motion";

// Simple visibility toggle with CSS transitions
function AnimatedBox() {
  const [visible, setVisible] = useState(true);
  
  return (
    <CSSMotion
      visible={visible}
      motionName="fade"
      motionAppear
      onAppearStart={(element) => {
        console.log('Animation started');
      }}
    >
      {({ style, className }) => (
        <div style={style} className={className}>
          Animated content
        </div>
      )}
    </CSSMotion>
  );
}

Architecture

RC Motion is built around several key components:

CSSMotion: Core component for single element animations with full lifecycle control
CSSMotionList: Specialized component for animating lists of keyed elements with add/remove/update transitions
Provider: Context provider for global motion configuration and performance optimization
Motion Status System: Comprehensive state management for animation phases (appear/enter/leave)
Cross-browser Support: Vendor prefix handling and feature detection for maximum compatibility

Capabilities

Single Element Animation

Core functionality for animating individual React elements with enter/leave/appear transitions. Supports both CSS-based animations and JavaScript motion callbacks.

export default function CSSMotion(props: CSSMotionProps): React.ReactElement;

interface CSSMotionProps {
  motionName?: MotionName;
  visible?: boolean;
  motionAppear?: boolean;
  motionEnter?: boolean;
  motionLeave?: boolean;
  motionDeadline?: number;
  children?: (
    props: {
      visible?: boolean;
      className?: string;
      style?: React.CSSProperties;
      [key: string]: any;
    },
    ref: (node: any) => void,
  ) => React.ReactElement;
}

type MotionName = string | {
  appear?: string;
  enter?: string;
  leave?: string;
  appearActive?: string;
  enterActive?: string;
  leaveActive?: string;
};

Single Element Animation

List Animation

Specialized component for animating arrays of keyed elements with smooth add/remove/reorder transitions. Automatically handles element lifecycle and position changes.

export function CSSMotionList(props: CSSMotionListProps): React.ReactElement;

interface CSSMotionListProps extends Omit<CSSMotionProps, 'onVisibleChanged' | 'children'> {
  keys: (React.Key | { key: React.Key; [name: string]: any })[];
  component?: string | React.ComponentType | false;
  onVisibleChanged?: (visible: boolean, info: { key: React.Key }) => void;
  onAllRemoved?: () => void;
  children?: (
    props: {
      visible?: boolean;
      className?: string;
      style?: React.CSSProperties;
      index?: number;
      [key: string]: any;
    },
    ref: (node: any) => void,
  ) => React.ReactElement;
}

List Animation

Global Configuration

Context provider for configuring motion behavior across your entire application. Enables performance optimizations and global motion controls.

export function Provider(props: MotionContextProps & { children?: React.ReactNode }): React.ReactElement;

interface MotionContextProps {
  motion?: boolean;
}

Motion Provider

Core Types

// Motion event handlers
type MotionEventHandler = (
  element: HTMLElement,
  event: MotionEvent,
) => React.CSSProperties | void;

type MotionEndEventHandler = (
  element: HTMLElement,
  event: MotionEvent,
) => boolean | void;

type MotionPrepareEventHandler = (
  element: HTMLElement,
) => Promise<any> | void;

// Motion event with deadline support
type MotionEvent = (TransitionEvent | AnimationEvent) & {
  deadline?: boolean;
};

// Motion and step status constants
type MotionStatus = 'none' | 'appear' | 'enter' | 'leave';
type StepStatus = 'none' | 'prepare' | 'start' | 'active' | 'end' | 'prepared';

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/rc-motion@2.9.x
Publish Source: CLI
Badge