Generate Colorful Text Placeholders In React – Spectrum

Category: Featured , React , Text
Author: ganapativs
Views Total: no views
Official Page: Go to website
Publish Date: May 29, 2020
License: MIT

React Spectrum is a tiny React component to generate colorful, animated placeholder blocks on the application.

Install & Download:

# Yarn
$ yarn add react-spectrum

# NPM
$ npm install react-spectrum --save

How to use it:

1. Import the Spectrum library.

import Spectrum from "react-spectrum";

2. Generate basic text placeholders and specify an array of colors as follows:

function Placeholder() {
  return (
    <Spectrum
      width={460}
      colors={["#757575", "#999999", "#0871F2", "#BF5AF2"]}
    />
  );
}

3. All available props with default values.

width = 500,
colors = ['#eee'],
wordWidths = [30, 60, 90, 120, 150],
wordDistances = [4, 8, 12],
wordHeight = 12,
wordRadius = 20,
linesPerParagraph = 8,
lineDistance = 12,
paragraphs = 1,
paragraphDistance = 24,
truncateLastLine = true,
renderWord = ({ key, style }: RenderWordProps): React.ReactElement => (
  <span key={key} style={style} />
),

Preview:

Generate Colorful Text Placeholders In React - Spectrum

You Might Be Interested In:

Leave a Reply