Generate colorful text placeholders 🎨
npm install react-spectrum






A tiny(around 1.3kb gzip) React library to generate colorful text placeholders 🎨
Inspired by this code illustration on CodeSandbox homepage 🙏
Try out the generator at react-spectrum.netlify.com 🎊 Also, check out @BotSpectrum twitter bot that tweets randomly generated colorful text placeholders for inspiration 🎊






- Basic
- Advanced
- Animating using CSS
- Install
- Usage
- Props
- Contribute
- License
``sh`
npm install react-spectrum
`sh`
yarn add react-spectrum
`html`
`jsx
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 | ['#eee'] | Possible colors of words, will be picked randomly |wordWidths
| | Array | [30, 60, 90, 120, 150] | Possible widths of words, will be picked randomly |wordDistances
| | Array | [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}) => | 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.
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.
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 https://github.com/cd react-spectrum
- Navigate to the newly cloned directory: git checkout -b my-new-feature
- Create a new branch for the new feature: yarn
- Install the tools necessary for development: git commit -am 'Add some feature'
- Make your changes.
- Commit your changes: git push origin my-new-feature`
- Push to the branch:
- Submit a pull request with full remarks documenting your changes