danilowoz/react-content-loader


⚪ SVG-Powered component to easily create placeholder loadings (like Facebook cards loading)

http://danilowoz.com/create-content-loader/

License: MIT

Language: TypeScript

Keywords: facebook-cards-loaders, loader, loading, placeholder, react, react-native, react-native-components, skeleton, skeleton-screen, svg


react-content-loader

Example's react-content-loader

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

Features

  • ⚙️ Customizable: Feel free to change the colors, speed, sizes and even RTL;
  • 👌 Plug and play: with many presets to use, see the examples;
  • ✏️ DIY: use the create-content-loader to create your own custom loaders easily;
  • 📱 React Native support: same API, as same powerful features;
  • ⚛️ Really lightweight: less than 2kB and 0 dependencies for web version;

Index

Getting Started

npm i react-content-loader --save
yarn add react-content-loader

CDN from JSDELIVR

Usage

There are two ways to use it:

1. Presets, see the examples:

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

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />

2. Custom mode, see the online tool

const MyLoader = () => (
  <ContentLoader>
    {/* Only SVG shapes */}    
    <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>
)

Still not clear? Take a look at this working example at codesandbox.io
Or try the components editable demo hands-on and install it from bit.dev

Native

react-content-loader can be used with React Native in the same way as web version with the same import:

1. Presets, see the examples:

import ContentLoader, { Facebook } from 'react-content-loader/native'

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />

2. Custom mode

To create custom loaders there is an important difference: as React Native doesn't have any native module for SVG components, it's necessary to import the shapes from react-native-svg or use the named export Rect and Circle from react-content-loader import:

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

const MyLoader = () => (
  <ContentLoader>
    <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>
)

Options

animate?: boolean

Defaults to true. Opt-out of animations with false

ariaLabel? string | boolean - Web only

Defaults to Loading interface.... It's used to describe what element it is. Use false to remove.

baseUrl? string - Web only

Required if you're using <base url="/" /> document <head/>.  Defaults to an empty string. This prop is common used as: <ContentLoader baseUrl={window.location.pathname} /> which will fill the SVG attribute with the relative path. Related #93.

speed?: number

Defaults to 2. Animation speed in seconds.

interval?: number - Web only

Defaults to 0.25. Interval of time between runs of the animation, as a fraction of the animation speed.

className? string

Defaults to an empty string. The classname will be set in the <svg /> element.

width? number

Defaults to 400. It will be set in the viewbox attr in the <svg />.

height? number

Defaults to 130. It will be set in the viewbox attr in the <svg />.

gradientRatio? number - Web only

Defaults to 2. Width of the animated gradient as a fraction of the viewbox width.

rtl? boolean

Defaults to false. Content right-to-left.

preserveAspectRatio?: string

Defaults to xMidYMid meet. Aspect ratio option of <svg/>. See the available options here.

primaryColor?: string

Defaults to #f3f3f3 which is used as background of animation.

secondaryColor?: string

Defaults to #ecebeb which is used as the placeholder/layer of animation.

primaryOpacity?: string - Web only

Defaults to 1. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in Safari

secondaryOpacity?: string - Web only

Defaults to 1. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in Safari

style?: React.CSSProperties

Defaults to an empty object.

uniquekey?: string - Web only

Defaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more here.

Examples

Facebook Style
import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook />

Facebook Style

Instagram Style
import { Instagram } from 'react-content-loader'

const MyInstagramLoader = () => <Instagram />

Instagram Style

Code Style
import { Code } from 'react-content-loader'

const MyCodeLoader = () => <Code />

Code Style

List Style
import { List } from 'react-content-loader'

const MyListLoader = () => <List />

List Style

Bullet list Style
import { BulletList } from 'react-content-loader'

const MyBulletListLoader = () => <BulletList />

Bullet list Style

Custom Style

For the custom mode, use the online tool.

const MyLoader = () => (
  <ContentLoader
    height={140}
    speed={1}
    primaryColor={'#333'}
    secondaryColor={'#999'}
  >
        {/* Only SVG shapes */}
        
    <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>
)

Custom

Similar packages

Development

Fork the repo then clone it

$ git clone git@github.com:YourUsername/react-content-loader.git && cd react-content-loader

$ npm i: Install the dependencies;

$ npm run build: Build to production;

$ npm run dev: Run the docz to see your changes;

$ npm run test: Run all tests: type checking, unit tests on web and native;

$ yarn test:watch: Watch unit tests;

$ yarn tsc: Typescript checking;

$ yarn tsc:watch: Typescript checking with watching;

Commit messages

Commit messages should follow the commit message convention so, changelogs could be generated automatically by that. Commit messages are validated automatically upon commit. If you aren't familiar with the commit message convention, you can use yarn commit (or npm run commit) instead of git commit, which provides an interactive CLI for generating proper commit messages.

License

MIT

Known Issues

Alpha is not working: Safari / iOS

When using rgba as a primaryColor or secondaryColor value, Safari does not respect the alpha channel, meaning that the color will be opaque. To prevent this, instead of using an rgba value for primaryColor/secondaryColor, use the rgb equivalent and move the alpha channel value to the primaryOpacity/secondaryOpacity props.

{/* Opaque color in Safari and iOS */}
<ContentLoader
  primaryColor="rgba(0,0,0,0.06)"
  secondaryColor="rgba(0,0,0,0.12)">


{/_ Semi-transparent color in Safari and iOS _/}
<ContentLoader
    primaryColor="rgb(0,0,0)"
    secondaryColor="rgb(0,0,0)"
    primaryOpacity={0.06}
    secondaryOpacity={0.12}>

Black box in Safari / iOS (again)

Using base tag on a page that contains SVG elements fails to render and it looks like a black box. Just remove the base-href tag from the <head /> and issue solved.

<img width="200" alt="Black box" src="https://user-images.githubusercontent.com/11562881/39406054-2f308de6-4bce-11e8-91fb-bbb35e29fc10.png" />

See: #93 / [109](

Project Statistics

Sourcerank 15
Repository Size 2.14 MB
Stars 7,832
Forks 278
Watchers 66
Open issues 4
Dependencies 1,574
Contributors 32
Tags 25
Created
Last updated
Last pushed

Top Contributors See all

Danilo Woznica Alexandre Kirszenberg Mateusz Burzyński Artur Muniz Iacami Gevaerd Ajay Poshak Luis Custodio Nic Mitchell Zack Seuberling gcangussu reck Lasse Borly Evgenij Kopitsa caian-gums Roy Ricardo Bruno Müller Bernardo Smaniotto Yuriy Khamzyaev Vitor Leonel

Packages Referencing this Repo

react-content-loader
SVG-Powered component to easily create placeholder loadings (like Facebook cards loading)
Latest release 4.3.1 - Updated - 7.83K stars
@alexkirsz/react-content-loader
SVG component to create placeholder loading, like Facebook cards loading.
Latest release 3.5.1 - Updated - 7.83K stars

Recent Tags See all

v4.3.1 October 08, 2019
v4.3.0 September 25, 2019
v4.2.2 July 09, 2019
v4.2.1 March 07, 2019
v4.2.0 March 06, 2019
v4.2.0 March 06, 2019
v4.1.0 March 06, 2019
v4.0.1 February 01, 2019
v4.0.0 January 24, 2019
v3.4.2 January 08, 2019
v3.4.1 November 27, 2018
v3.4.0 November 27, 2018
v3.3.0 November 27, 2018
v3.2.0 November 27, 2018
v3.1.1 February 13, 2018

Interesting Forks See all

noure/react-content-loader
white_circle SVG-Powered component to easily create placeholder loadings (like Facebook cards l...
TypeScript - MIT - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-10-08 12:36:25 UTC

Login to resync this repository