tessl/npm-react-content-loader
SVG-powered React component for creating placeholder loading animations with support for both web and React Native platforms.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
presets.mddocs/
Preset Components
Ready-to-use placeholder loading components for common UI patterns. All presets accept the same props as the main ContentLoader component for customization.
Capabilities
Facebook Preset
Facebook-style card loader with avatar circle and text lines, perfect for social media feeds and user profiles.
/**
* Facebook-style card loader with avatar and text lines
* ViewBox: "0 0 476 124"
* Features: Circle avatar (20 unit radius) + 4 text rectangles
*/
declare const Facebook: React.FC<IContentLoaderProps>;Usage Example:
import { Facebook } from 'react-content-loader';
const MyFacebookLoader = () => (
<Facebook
speed={1.5}
backgroundColor="#f3f3f3"
foregroundColor="#ecebeb"
/>
);Instagram Preset
Instagram-style post loader with profile section and large image area, ideal for photo-sharing applications.
/**
* Instagram-style post loader with profile info and image area
* ViewBox: "0 0 400 460"
* Features: Small avatar circle + name/location text + large image rectangle
*/
declare const Instagram: React.FC<IContentLoaderProps>;Usage Example:
import { Instagram } from 'react-content-loader';
const MyInstagramLoader = () => (
<Instagram
viewBox="0 0 400 460"
height={460}
width={400}
/>
);Code Preset
Code editor style loader with varying line lengths, perfect for syntax highlighting and code display areas.
/**
* Code editor style loader with varying line lengths
* ViewBox: "0 0 340 84"
* Features: Multiple text rectangles of different widths simulating code structure
*/
declare const Code: React.FC<IContentLoaderProps>;Usage Example:
import { Code } from 'react-content-loader';
const MyCodeLoader = () => (
<Code
backgroundColor="#2d3748"
foregroundColor="#4a5568"
speed={0.8}
/>
);List Preset
List style loader with hierarchical line structure, ideal for content lists and navigation menus.
/**
* List style loader with hierarchical text structure
* ViewBox: "0 0 400 110"
* Features: Main items (full width) + indented sub-items
*/
declare const List: React.FC<IContentLoaderProps>;Usage Example:
import { List } from 'react-content-loader';
const MyListLoader = () => (
<List
height={110}
width={400}
rtl={false}
/>
);BulletList Preset
Bullet list style loader with circles and text lines, perfect for article content and feature lists.
/**
* Bullet list style loader with circles and text
* ViewBox: "0 0 245 125"
* Features: Circle bullets (8 unit radius) + text rectangles for each item
*/
declare const BulletList: React.FC<IContentLoaderProps>;Usage Example:
import { BulletList } from 'react-content-loader';
const MyBulletListLoader = () => (
<BulletList
animate={true}
speed={1.2}
interval={0.25}
/>
);Customization Options
All preset components accept the same customization props as the main ContentLoader:
Animation Control
// Disable animation
<Facebook animate={false} />
// Slower animation
<Instagram speed={2.0} />
// Custom animation timing
<Code speed={1.0} interval={0.5} />Visual Styling
// Dark theme
<List
backgroundColor="#2d3748"
foregroundColor="#4a5568"
/>
// Custom colors
<BulletList
backgroundColor="#f7fafc"
foregroundColor="#e2e8f0"
/>Layout Adjustments
// Right-to-left support
<Facebook rtl={true} />
// Custom dimensions (web only)
<Instagram
height={300}
width={300}
style={{ maxWidth: '100%' }}
/>Platform-Specific Options
For web-only features:
// Gradient customization (web only)
<Code
gradientRatio={1.5}
gradientDirection="top-bottom"
/>
// Accessibility (web only)
<Facebook title="Loading user profile..." />
// SSR consistency (web only)
<Instagram uniqueKey="profile-loader" />React Native Usage
All presets work identically in React Native:
import { Facebook, Instagram } from 'react-content-loader/native';
const MyNativeLoader = () => (
<Facebook
backgroundColor="#f3f3f3"
foregroundColor="#ecebeb"
speed={1.2}
/>
);Note: React Native versions automatically exclude web-only props like gradientRatio, backgroundOpacity, and title.
Install with Tessl CLI
npx tessl i tessl/npm-react-content-loader