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

npm install react-spectrum

yarn add react-spectrum

<script src="https://unpkg.com/react-spectrum/dist/react-spectrum.umd.js"></script>

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

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

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/<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

This project is licensed under The MIT License (MIT), see the LICENSE file for more details.

This project is tested with BrowserStack.