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

Overview

Eval results

Files

Motion Provider

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

Context provider for configuring motion behavior across your entire application. The Provider enables performance optimizations, global motion controls, and consistent animation settings throughout your React component tree.

Capabilities

Provider Component

React context provider that supplies motion configuration to all CSSMotion and CSSMotionList components in its subtree.

/**
 * Motion context provider for global motion configuration
 * @param props - Provider configuration and children
 * @returns Context provider component
 */
export default function Provider(props: MotionContextProps & { children?: React.ReactNode }): React.ReactElement;

interface MotionContextProps {
  /** Global motion enable/disable flag - when false, disables all animations */
  motion?: boolean;
}

Usage Examples:

import { Provider } from "rc-motion";

// Global motion control
function App() {
  const [motionEnabled, setMotionEnabled] = useState(true);
  
  return (
    <Provider motion={motionEnabled}>
      <Header />
      <MainContent />
      <Footer />
      <button onClick={() => setMotionEnabled(!motionEnabled)}>
        {motionEnabled ? 'Disable' : 'Enable'} Animations
      </button>
    </Provider>
  );
}

// Accessibility-aware motion
function AccessibleApp() {
  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
  
  return (
    <Provider motion={!prefersReducedMotion}>
      <AppContent />
    </Provider>
  );
}

// Conditional motion based on device performance
function PerformanceAwareApp() {
  const [lowPerformanceMode, setLowPerformanceMode] = useState(false);
  
  useEffect(() => {
    // Detect low-end devices or slow connections
    const connection = navigator.connection;
    if (connection && connection.effectiveType === 'slow-2g') {
      setLowPerformanceMode(true);
    }
  }, []);
  
  return (
    <Provider motion={!lowPerformanceMode}>
      <AppContent />
    </Provider>
  );
}

Motion Context

React context for sharing motion configuration between components.

/**
 * React context for motion configuration
 * Used internally by CSSMotion and CSSMotionList components
 */
export const Context: React.Context<MotionContextProps>;

interface MotionContextProps {
  motion?: boolean;
}

Usage in Custom Components:

import { useContext } from "react";
import { Context } from "rc-motion";

function CustomAnimatedComponent() {
  const { motion } = useContext(Context);
  
  return (
    <div 
      className={motion ? 'with-animation' : 'no-animation'}
      style={{
        transition: motion ? 'all 0.3s ease' : 'none'
      }}
    >
      Content respects global motion setting
    </div>
  );
}

Provider Behavior

The Provider component affects all CSSMotion and CSSMotionList components in its subtree:

motion: true (default): All animations work normally
motion: false: Animations are disabled, components skip motion phases
motion: undefined: Uses default component behavior (animations enabled)

Nested Providers

Providers can be nested, with inner providers overriding outer ones:

function NestedProviders() {
  return (
    <Provider motion={true}>
      {/* This section has animations enabled */}
      <AnimatedSection />
      
      <Provider motion={false}>
        {/* This section has animations disabled */}
        <StaticSection />
        
        <Provider motion={true}>
          {/* This deeply nested section has animations enabled again */}
          <SpecialAnimatedSection />
        </Provider>
      </Provider>
    </Provider>
  );
}

Performance Considerations

Using the Provider for performance optimization:

function OptimizedApp() {
  const [isHeavyOperation, setIsHeavyOperation] = useState(false);
  
  return (
    <Provider motion={!isHeavyOperation}>
      <ExpensiveComponent onHeavyWork={setIsHeavyOperation} />
      {/* Animations disabled during heavy operations */}
    </Provider>
  );
}

Integration with Motion Libraries

The Provider works seamlessly with other animation libraries:

function HybridMotionApp() {
  const [globalMotion, setGlobalMotion] = useState(true);
  
  return (
    <Provider motion={globalMotion}>
      {/* RC Motion components respect the provider */}
      <CSSMotion visible={showModal} motionName="modal">
        {/* ... */}
      </CSSMotion>
      
      {/* Other libraries can check context manually */}
      <CustomFramerMotionComponent respectGlobalMotion={globalMotion} />
    </Provider>
  );
}

Install with Tessl CLI