0
# React Content Loader
1
2
React Content Loader is a modern TypeScript library providing SVG-powered placeholder loading animations (skeleton screens) for React applications. It offers both pre-built preset components for common use cases and a flexible API for creating custom loaders, with full support for both React web and React Native platforms.
3
4
## Package Information
5
6
- **Package Name**: react-content-loader
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-content-loader`
10
- **React Native**: `npm install react-content-loader react-native-svg`
11
12
## Core Imports
13
14
For React web applications:
15
16
```typescript
17
import ContentLoader, { Facebook, Instagram, Code, List, BulletList } from 'react-content-loader';
18
```
19
20
For React Native applications:
21
22
```typescript
23
import ContentLoader, { Facebook, Instagram, Code, List, BulletList, Circle, Rect, Path } from 'react-content-loader/native';
24
```
25
26
CommonJS support:
27
28
```javascript
29
const ContentLoader = require('react-content-loader');
30
const { Facebook, Instagram } = require('react-content-loader');
31
```
32
33
## Basic Usage
34
35
### Using Preset Components
36
37
```typescript
38
import ContentLoader, { Facebook, Instagram } from 'react-content-loader';
39
40
// Default Facebook-style loader
41
const MyLoader = () => <ContentLoader />;
42
43
// Specific preset
44
const MyFacebookLoader = () => <Facebook />;
45
46
// Instagram preset with customization
47
const MyInstagramLoader = () => (
48
49
speed={2}
50
backgroundColor="#f3f3f3"
51
foregroundColor="#ecebeb"
52
/>
53
);
54
```
55
56
### Creating Custom Loaders
57
58
```typescript
59
import ContentLoader from 'react-content-loader';
60
61
const MyCustomLoader = () => (
62
<ContentLoader viewBox="0 0 380 70" height={70} width={380}>
63
<rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
64
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
65
<rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
66
</ContentLoader>
67
);
68
```
69
70
### React Native Custom Loaders
71
72
```typescript
73
import ContentLoader, { Circle, Rect } from 'react-content-loader/native';
74
75
const MyNativeLoader = () => (
76
<ContentLoader viewBox="0 0 380 70">
77
<Circle cx="30" cy="30" r="30" />
78
<Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
79
<Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
80
</ContentLoader>
81
);
82
```
83
84
## Architecture
85
86
React Content Loader is built around several key components:
87
88
- **Main Component**: `ContentLoader` acts as the primary wrapper and animation controller
89
- **SVG Renderer**: Platform-specific SVG components handle cross-platform rendering
90
- **Animation System**: Web uses CSS animations, React Native uses Animated API
91
- **Preset Library**: Pre-built components for common loading patterns
92
- **Type System**: Full TypeScript support with comprehensive prop interfaces
93
- **Dual Platform**: Unified API across React web and React Native
94
95
## Capabilities
96
97
### Main ContentLoader Component
98
99
Core component providing SVG-powered placeholder loading animations with extensive customization options. Automatically renders Facebook preset when no children provided.
100
101
```typescript { .api }
102
interface IContentLoaderProps extends SVGAttributes<SVGElement> {
103
animate?: boolean;
104
animateBegin?: string;
105
backgroundColor?: string;
106
backgroundOpacity?: number;
107
baseUrl?: string;
108
foregroundColor?: string;
109
foregroundOpacity?: number;
110
gradientRatio?: number;
111
gradientDirection?: 'left-right' | 'top-bottom';
112
interval?: number;
113
rtl?: boolean;
114
speed?: number;
115
title?: string;
116
uniqueKey?: string;
117
beforeMask?: JSX.Element;
118
}
119
120
declare const ContentLoader: React.FC<IContentLoaderProps>;
121
```
122
123
### Preset Components
124
125
Ready-to-use placeholder components for common UI patterns including social media cards, lists, and code editors.
126
127
```typescript { .api }
128
declare const Facebook: React.FC<IContentLoaderProps>;
129
declare const Instagram: React.FC<IContentLoaderProps>;
130
declare const Code: React.FC<IContentLoaderProps>;
131
declare const List: React.FC<IContentLoaderProps>;
132
declare const BulletList: React.FC<IContentLoaderProps>;
133
```
134
135
[Preset Components](./presets.md)
136
137
### React Native Support
138
139
Identical API with additional SVG shape exports for custom loaders. Uses React Native's Animated API for smooth performance.
140
141
```typescript { .api }
142
interface IContentLoaderProps extends SvgProps {
143
animate?: boolean;
144
backgroundColor?: string;
145
foregroundColor?: string;
146
rtl?: boolean;
147
speed?: number;
148
interval?: number;
149
uniqueKey?: string;
150
beforeMask?: JSX.Element;
151
}
152
153
declare const Circle: React.ComponentType<any>;
154
declare const Rect: React.ComponentType<any>;
155
declare const Path: React.ComponentType<any>;
156
```
157
158
[React Native](./react-native.md)
159
160
## Types
161
162
```typescript { .api }
163
interface IContentLoaderProps extends SVGAttributes<SVGElement> {
164
/** Enable/disable animation */
165
animate?: boolean;
166
/** Animation delay for web (SVG animate begin attribute, defaults to undefined) */
167
animateBegin?: string;
168
/** Background color of the animation */
169
backgroundColor?: string;
170
/** Background opacity (0-1, web only) */
171
backgroundOpacity?: number;
172
/** Base URL for SVG references (web only, for <base> tag compatibility) */
173
baseUrl?: string;
174
/** Foreground color of the animation */
175
foregroundColor?: string;
176
/** Foreground opacity (0-1, web only) */
177
foregroundOpacity?: number;
178
/** Width of animated gradient as fraction of viewBox width (web only) */
179
gradientRatio?: number;
180
/** Direction of gradient animation (web only) */
181
gradientDirection?: 'left-right' | 'top-bottom';
182
/** Interval between animation runs as fraction of speed */
183
interval?: number;
184
/** Right-to-left content support */
185
rtl?: boolean;
186
/** Animation speed in seconds */
187
speed?: number;
188
/** Accessibility title (web only) */
189
title?: string;
190
/** Unique identifier for SSR consistency (web only) */
191
uniqueKey?: string;
192
/** Custom shapes rendered before content mask */
193
beforeMask?: JSX.Element;
194
}
195
```