0
# Motion Provider
1

2
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.
3

4
## Capabilities
5

6
### Provider Component
7

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

10
```typescript { .api }
11
/**
12
 * Motion context provider for global motion configuration
13
 * @param props - Provider configuration and children
14
 * @returns Context provider component
15
 */
16
export default function Provider(props: MotionContextProps & { children?: React.ReactNode }): React.ReactElement;
17

18
interface MotionContextProps {
19
  /** Global motion enable/disable flag - when false, disables all animations */
20
  motion?: boolean;
21
}
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
import { Provider } from "rc-motion";
28

29
// Global motion control
30
function App() {
31
  const [motionEnabled, setMotionEnabled] = useState(true);
32
  
33
  return (
34
    <Provider motion={motionEnabled}>
35
      <Header />
36
      <MainContent />
37
      <Footer />
38
      <button onClick={() => setMotionEnabled(!motionEnabled)}>
39
        {motionEnabled ? 'Disable' : 'Enable'} Animations
40
      </button>
41
    </Provider>
42
  );
43
}
44

45
// Accessibility-aware motion
46
function AccessibleApp() {
47
  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
48
  
49
  return (
50
    <Provider motion={!prefersReducedMotion}>
51
      <AppContent />
52
    </Provider>
53
  );
54
}
55

56
// Conditional motion based on device performance
57
function PerformanceAwareApp() {
58
  const [lowPerformanceMode, setLowPerformanceMode] = useState(false);
59
  
60
  useEffect(() => {
61
    // Detect low-end devices or slow connections
62
    const connection = navigator.connection;
63
    if (connection && connection.effectiveType === 'slow-2g') {
64
      setLowPerformanceMode(true);
65
    }
66
  }, []);
67
  
68
  return (
69
    <Provider motion={!lowPerformanceMode}>
70
      <AppContent />
71
    </Provider>
72
  );
73
}
74
```
75

76
### Motion Context
77

78
React context for sharing motion configuration between components.
79

80
```typescript { .api }
81
/**
82
 * React context for motion configuration
83
 * Used internally by CSSMotion and CSSMotionList components
84
 */
85
export const Context: React.Context<MotionContextProps>;
86

87
interface MotionContextProps {
88
  motion?: boolean;
89
}
90
```
91

92
**Usage in Custom Components:**
93

94
```typescript
95
import { useContext } from "react";
96
import { Context } from "rc-motion";
97

98
function CustomAnimatedComponent() {
99
  const { motion } = useContext(Context);
100
  
101
  return (
102
    <div 
103
      className={motion ? 'with-animation' : 'no-animation'}
104
      style={{
105
        transition: motion ? 'all 0.3s ease' : 'none'
106
      }}
107
    >
108
      Content respects global motion setting
109
    </div>
110
  );
111
}
112
```
113

114
### Provider Behavior
115

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

118
- **`motion: true` (default)**: All animations work normally
119
- **`motion: false`**: Animations are disabled, components skip motion phases
120
- **`motion: undefined`**: Uses default component behavior (animations enabled)
121

122
### Nested Providers
123

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

126
```typescript
127
function NestedProviders() {
128
  return (
129
    <Provider motion={true}>
130
      {/* This section has animations enabled */}
131
      <AnimatedSection />
132
      
133
      <Provider motion={false}>
134
        {/* This section has animations disabled */}
135
        <StaticSection />
136
        
137
        <Provider motion={true}>
138
          {/* This deeply nested section has animations enabled again */}
139
          <SpecialAnimatedSection />
140
        </Provider>
141
      </Provider>
142
    </Provider>
143
  );
144
}
145
```
146

147
### Performance Considerations
148

149
Using the Provider for performance optimization:
150

151
```typescript
152
function OptimizedApp() {
153
  const [isHeavyOperation, setIsHeavyOperation] = useState(false);
154
  
155
  return (
156
    <Provider motion={!isHeavyOperation}>
157
      <ExpensiveComponent onHeavyWork={setIsHeavyOperation} />
158
      {/* Animations disabled during heavy operations */}
159
    </Provider>
160
  );
161
}
162
```
163

164
### Integration with Motion Libraries
165

166
The Provider works seamlessly with other animation libraries:
167

168
```typescript
169
function HybridMotionApp() {
170
  const [globalMotion, setGlobalMotion] = useState(true);
171
  
172
  return (
173
    <Provider motion={globalMotion}>
174
      {/* RC Motion components respect the provider */}
175
      <CSSMotion visible={showModal} motionName="modal">
176
        {/* ... */}
177
      </CSSMotion>
178
      
179
      {/* Other libraries can check context manually */}
180
      <CustomFramerMotionComponent respectGlobalMotion={globalMotion} />
181
    </Provider>
182
  );
183
}
184
```