react-text-skeleton
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

React Text Skeleton

A simple and small react library in order to create a text skeleton that either blurs out a dummy text or displays a loading gradient until the final text is loaded. The advantage is that it the blurred/gradient length is determined by the dummy text that should aproximatelly match the length of the data that is going to be fetched(it also takes in consideration the font-size). This way it creates a nice simple effect without the need of measuring the data that is beining loaded in a fixed pixel ratio. Demo: https://techbinator.github.io/react-text-skeleton

Features

  • React Text Skeleton Loader
  • You can create easily a text skeleton without providing exact dimensions
  • You can select from blurred or gradient effect
  • Can override the styles
  • It takes the parrent and/or children css properties (like font size or font type) and it generates the effect while keepping the exact dimensions.

Installation

npm i react-text-skeleton

Usage

Add the dummyText prop while having a text similar to the one that is fetched. For example if a price that has 3 digits set the dummyText with a 3 digits number. Once the children prop is provided the blurring and dummy text are replaced with that.

<TextSkeleton dummyText="Dummy text">{realText}</TextSkeleton>

dummyText: string; className?: string; skeletonType?: 'blurred' | 'gradient';

Props

<TextSkeleton>

Name Type Default Description
dummyText string null Mandatory field, provide a string of a length that has aproximatelly the same dimensions as the data that is being fetched
className string '' Extra class(es) that would be prepended
skeletonType string 'blurred' The desired effect can be either 'blurred' or 'gradient'

Example

import React from 'react';
 
import TextSkeleton from 'react-text-skeleton';
 
const App: React.FC = () => {
  return <TextSkeleton dummyText="Dummy text">{loadingText}</TextSkeleton>;
};

License

MIT

Package Sidebar

Install

npm i react-text-skeleton

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

16.7 kB

Total Files

10

Last publish

Collaborators

  • tudorfilipovici