Skip to content
Generate colorful text placeholders 🎨
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

Latest commit 6422064 Mar 22, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Update stale.yml Feb 14, 2020
assets Readme boost (#3) Jan 18, 2020
dist Dependency updates Mar 9, 2020
src renderWord prop + Publish 1.1.5 Jan 11, 2020
.babelrc Initial commit Dec 21, 2019
.eslintrc Initial commit Dec 21, 2019
.gitignore Initial commit Dec 21, 2019
.npmignore Initial commit Dec 21, 2019
.travis.yml Initial commit Dec 21, 2019
LICENSE License update Feb 7, 2020 Readme boost (#3) Jan 18, 2020
package.json Deps upgrade + Publish 1.1.7 Mar 22, 2020
rollup.config.js Fix UMD build + Publish 1.1.4 Jan 7, 2020
tsconfig.json Initial commit Dec 21, 2019
yarn.lock Lock file fixes Mar 22, 2020

1 2 3 4 5 6

React Spectrum

A tiny(around 1.2kb gzip) React library to generate colorful text placeholders 🎨

Inspired by this code illustration on CodeSandbox homepage πŸ™

Try out the generator at 🎊 Also, check out @BotSpectrum twitter bot that tweets randomly generated colorful text placeholders for inspiration 🎊

MIT Licence Open Source Love Build Status npm version GitHub version Greenkeeper badge


Table of Contents



npm install react-spectrum


yarn add react-spectrum

UMD build

<script src=""></script>


import React from "react";
// Import library
import Spectrum from "react-spectrum";
// or const Spectrum = require('react-spectrum');

// Render the placeholder
function Placeholder() {
  return (
      colors={["#757575", "#999999", "#0871F2", "#BF5AF2"]}


Property Type Default Description
width number 500 Width of the placeholder container
colors Array<string> ['#eee'] Possible colors of words, will be picked randomly
wordWidths Array<number> [30, 60, 90, 120, 150] Possible widths of words, will be picked randomly
wordDistances Array<number> [4, 8, 12] Possible distance between words, will be picked randomly
wordHeight number 12 Height of every word placeholder
wordRadius number 20 Border radius of every word
lineDistance number 12 Distance(margin) between the lines
linesPerParagraph number 8 Lines per paragraph. if there are multiple paragraphs, all of them will have same number of lines
paragraphs number 1 Number of paragraphs in the placeholder
paragraphDistance number 24 Distance(margin) between the paragraphs
truncateLastLine boolean true Show less words in the last line for more natural feel
renderWord function ({ key, style}) => <span key={key} style={style} /> Render word with customizations(avoid overriding passed style properties. it might break the functionality)


Thanks for taking the time to contribute, please check out the src to understand how things work.

Reporting Issues

Found a problem? Want a new feature? First of all, see if your issue or idea has already been reported. If don't, just open a new clear and descriptive issue.

Submitting pull requests

Pull requests are the greatest contributions, so be sure they are focused in scope and do avoid unrelated commits.

  • Fork it!
  • Clone your fork: git clone<your-username>/react-spectrum
  • Navigate to the newly cloned directory: cd react-spectrum
  • Create a new branch for the new feature: git checkout -b my-new-feature
  • Install the tools necessary for development: yarn
  • Make your changes.
  • Commit your changes: git commit -am 'Add some feature'
  • Push to the branch: git push origin my-new-feature
  • Submit a pull request with full remarks documenting your changes


MIT License Β© Ganapati V S

You can’t perform that action at this time.