CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-content-loader

SVG-powered React component for creating placeholder loading animations with support for both web and React Native platforms.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

index.mddocs/

React Content Loader

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.

Package Information

  • Package Name: react-content-loader
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-content-loader
  • React Native: npm install react-content-loader react-native-svg

Core Imports

For React web applications:

import ContentLoader, { Facebook, Instagram, Code, List, BulletList } from 'react-content-loader';

For React Native applications:

import ContentLoader, { Facebook, Instagram, Code, List, BulletList, Circle, Rect, Path } from 'react-content-loader/native';

CommonJS support:

const ContentLoader = require('react-content-loader');
const { Facebook, Instagram } = require('react-content-loader');

Basic Usage

Using Preset Components

import ContentLoader, { Facebook, Instagram } from 'react-content-loader';

// Default Facebook-style loader
const MyLoader = () => <ContentLoader />;

// Specific preset
const MyFacebookLoader = () => <Facebook />;

// Instagram preset with customization
const MyInstagramLoader = () => (
  <Instagram 
    speed={2} 
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
  />
);

Creating Custom Loaders

import ContentLoader from 'react-content-loader';

const MyCustomLoader = () => (
  <ContentLoader viewBox="0 0 380 70" height={70} width={380}>
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
);

React Native Custom Loaders

import ContentLoader, { Circle, Rect } from 'react-content-loader/native';

const MyNativeLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    <Circle cx="30" cy="30" r="30" />
    <Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
);

Architecture

React Content Loader is built around several key components:

  • Main Component: ContentLoader acts as the primary wrapper and animation controller
  • SVG Renderer: Platform-specific SVG components handle cross-platform rendering
  • Animation System: Web uses CSS animations, React Native uses Animated API
  • Preset Library: Pre-built components for common loading patterns
  • Type System: Full TypeScript support with comprehensive prop interfaces
  • Dual Platform: Unified API across React web and React Native

Capabilities

Main ContentLoader Component

Core component providing SVG-powered placeholder loading animations with extensive customization options. Automatically renders Facebook preset when no children provided.

interface IContentLoaderProps extends SVGAttributes<SVGElement> {
  animate?: boolean;
  animateBegin?: string;
  backgroundColor?: string;
  backgroundOpacity?: number;
  baseUrl?: string;
  foregroundColor?: string;
  foregroundOpacity?: number;
  gradientRatio?: number;
  gradientDirection?: 'left-right' | 'top-bottom';
  interval?: number;
  rtl?: boolean;
  speed?: number;
  title?: string;
  uniqueKey?: string;
  beforeMask?: JSX.Element;
}

declare const ContentLoader: React.FC<IContentLoaderProps>;

Preset Components

Ready-to-use placeholder components for common UI patterns including social media cards, lists, and code editors.

declare const Facebook: React.FC<IContentLoaderProps>;
declare const Instagram: React.FC<IContentLoaderProps>;
declare const Code: React.FC<IContentLoaderProps>;
declare const List: React.FC<IContentLoaderProps>;
declare const BulletList: React.FC<IContentLoaderProps>;

Preset Components

React Native Support

Identical API with additional SVG shape exports for custom loaders. Uses React Native's Animated API for smooth performance.

interface IContentLoaderProps extends SvgProps {
  animate?: boolean;
  backgroundColor?: string;
  foregroundColor?: string;
  rtl?: boolean;
  speed?: number;
  interval?: number;
  uniqueKey?: string;
  beforeMask?: JSX.Element;
}

declare const Circle: React.ComponentType<any>;
declare const Rect: React.ComponentType<any>;
declare const Path: React.ComponentType<any>;

React Native

Types

interface IContentLoaderProps extends SVGAttributes<SVGElement> {
  /** Enable/disable animation */
  animate?: boolean;
  /** Animation delay for web (SVG animate begin attribute, defaults to undefined) */
  animateBegin?: string;
  /** Background color of the animation */
  backgroundColor?: string;
  /** Background opacity (0-1, web only) */
  backgroundOpacity?: number;
  /** Base URL for SVG references (web only, for <base> tag compatibility) */
  baseUrl?: string;
  /** Foreground color of the animation */
  foregroundColor?: string;
  /** Foreground opacity (0-1, web only) */
  foregroundOpacity?: number;
  /** Width of animated gradient as fraction of viewBox width (web only) */
  gradientRatio?: number;
  /** Direction of gradient animation (web only) */
  gradientDirection?: 'left-right' | 'top-bottom';
  /** Interval between animation runs as fraction of speed */
  interval?: number;
  /** Right-to-left content support */
  rtl?: boolean;
  /** Animation speed in seconds */
  speed?: number;
  /** Accessibility title (web only) */
  title?: string;
  /** Unique identifier for SSR consistency (web only) */
  uniqueKey?: string;
  /** Custom shapes rendered before content mask */
  beforeMask?: JSX.Element;
}

Install with Tessl CLI

npx tessl i tessl/npm-react-content-loader

docs

index.md

presets.md

react-native.md

tile.json