npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@alexkirsz/react-content-loader

v3.5.1

Published

SVG component to create placeholder loading, like Facebook cards loading.

Downloads

8

Readme

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

Features

  • :gear: Customizable: Feel free to change the colors, speed, sizes and even RTL;
  • :ok_hand: Plug and play: with many presets to use, see the examples;
  • :pencil2: DIY: use the create-content-loader to create your own custom loaders easily;
  • ⚛️ Lightweight: only 1.4kB gzipped and 0 dependencies;

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

Options

animate?: boolean

Defaults to true. Opt-out of animations with false

ariaLabel? string | boolean

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

speed?: number

Defaults to 2. Animation speed in seconds.

interval?: number

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

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

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

secondaryOpacity?: string

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

stops?: Array<{ offset: number; color: string; opacity: number }>

Defaults to a linear gradient with 3 evenly spaced stops for the colors primary, secondary, then primary again. If set, the values of primaryColor, secondaryColor, primaryOpacity and secondaryOpacity are ignored.

style?: React.CSSProperties

Defaults to an empty object.

uniquekey?: string

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 [email protected]:YourUsername/react-content-loader.git && cd react-content-loader

$ yarn: Install the dependencies;

$ yarn build: Build to production;

$ yarn dev: Run the docz to see your changes;

$ yarn test: Run all tests: type checking and unit tests;

$ 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.

See: #93 / 109