0
# Preset Components
1

2
Ready-to-use placeholder loading components for common UI patterns. All presets accept the same props as the main ContentLoader component for customization.
3

4
## Capabilities
5

6
### Facebook Preset
7

8
Facebook-style card loader with avatar circle and text lines, perfect for social media feeds and user profiles.
9

10
```typescript { .api }
11
/**
12
 * Facebook-style card loader with avatar and text lines
13
 * ViewBox: "0 0 476 124"
14
 * Features: Circle avatar (20 unit radius) + 4 text rectangles
15
 */
16
declare const Facebook: React.FC<IContentLoaderProps>;
17
```
18

19
**Usage Example:**
20
```typescript
21
import { Facebook } from 'react-content-loader';
22

23
const MyFacebookLoader = () => (
24
  <Facebook 
25
    speed={1.5}
26
    backgroundColor="#f3f3f3"
27
    foregroundColor="#ecebeb"
28
  />
29
);
30
```
31

32
### Instagram Preset
33

34
Instagram-style post loader with profile section and large image area, ideal for photo-sharing applications.
35

36
```typescript { .api }
37
/**
38
 * Instagram-style post loader with profile info and image area
39
 * ViewBox: "0 0 400 460"
40
 * Features: Small avatar circle + name/location text + large image rectangle
41
 */
42
declare const Instagram: React.FC<IContentLoaderProps>;
43
```
44

45
**Usage Example:**
46
```typescript
47
import { Instagram } from 'react-content-loader';
48

49
const MyInstagramLoader = () => (
50
  <Instagram 
51
    viewBox="0 0 400 460"
52
    height={460}
53
    width={400}
54
  />
55
);
56
```
57

58
### Code Preset
59

60
Code editor style loader with varying line lengths, perfect for syntax highlighting and code display areas.
61

62
```typescript { .api }
63
/**
64
 * Code editor style loader with varying line lengths
65
 * ViewBox: "0 0 340 84"
66
 * Features: Multiple text rectangles of different widths simulating code structure
67
 */
68
declare const Code: React.FC<IContentLoaderProps>;
69
```
70

71
**Usage Example:**
72
```typescript
73
import { Code } from 'react-content-loader';
74

75
const MyCodeLoader = () => (
76
  <Code 
77
    backgroundColor="#2d3748"
78
    foregroundColor="#4a5568"
79
    speed={0.8}
80
  />
81
);
82
```
83

84
### List Preset
85

86
List style loader with hierarchical line structure, ideal for content lists and navigation menus.
87

88
```typescript { .api }
89
/**
90
 * List style loader with hierarchical text structure
91
 * ViewBox: "0 0 400 110"
92
 * Features: Main items (full width) + indented sub-items
93
 */
94
declare const List: React.FC<IContentLoaderProps>;
95
```
96

97
**Usage Example:**
98
```typescript
99
import { List } from 'react-content-loader';
100

101
const MyListLoader = () => (
102
  <List 
103
    height={110}
104
    width={400}
105
    rtl={false}
106
  />
107
);
108
```
109

110
### BulletList Preset
111

112
Bullet list style loader with circles and text lines, perfect for article content and feature lists.
113

114
```typescript { .api }
115
/**
116
 * Bullet list style loader with circles and text
117
 * ViewBox: "0 0 245 125"
118
 * Features: Circle bullets (8 unit radius) + text rectangles for each item
119
 */
120
declare const BulletList: React.FC<IContentLoaderProps>;
121
```
122

123
**Usage Example:**
124
```typescript
125
import { BulletList } from 'react-content-loader';
126

127
const MyBulletListLoader = () => (
128
  <BulletList 
129
    animate={true}
130
    speed={1.2}
131
    interval={0.25}
132
  />
133
);
134
```
135

136
## Customization Options
137

138
All preset components accept the same customization props as the main ContentLoader:
139

140
### Animation Control
141
```typescript
142
// Disable animation
143
<Facebook animate={false} />
144

145
// Slower animation
146
<Instagram speed={2.0} />
147

148
// Custom animation timing
149
<Code speed={1.0} interval={0.5} />
150
```
151

152
### Visual Styling
153
```typescript
154
// Dark theme
155
<List 
156
  backgroundColor="#2d3748" 
157
  foregroundColor="#4a5568" 
158
/>
159

160
// Custom colors
161
<BulletList 
162
  backgroundColor="#f7fafc" 
163
  foregroundColor="#e2e8f0" 
164
/>
165
```
166

167
### Layout Adjustments
168
```typescript
169
// Right-to-left support
170
<Facebook rtl={true} />
171

172
// Custom dimensions (web only)
173
<Instagram 
174
  height={300} 
175
  width={300} 
176
  style={{ maxWidth: '100%' }}
177
/>
178
```
179

180
### Platform-Specific Options
181

182
For web-only features:
183
```typescript
184
// Gradient customization (web only)
185
<Code 
186
  gradientRatio={1.5}
187
  gradientDirection="top-bottom"
188
/>
189

190
// Accessibility (web only)
191
<Facebook title="Loading user profile..." />
192

193
// SSR consistency (web only)
194
<Instagram uniqueKey="profile-loader" />
195
```
196

197
## React Native Usage
198

199
All presets work identically in React Native:
200

201
```typescript
202
import { Facebook, Instagram } from 'react-content-loader/native';
203

204
const MyNativeLoader = () => (
205
  <Facebook 
206
    backgroundColor="#f3f3f3"
207
    foregroundColor="#ecebeb"
208
    speed={1.2}
209
  />
210
);
211
```
212

213
Note: React Native versions automatically exclude web-only props like `gradientRatio`, `backgroundOpacity`, and `title`.