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

    1.2.3 • Public • Published

    1 2 3 4 5 6

    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 🎊

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

    Demo

    Table of Contents

    Install

    NPM

    npm install react-spectrum

    Yarn

    yarn add react-spectrum

    UMD build

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

    Usage

    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"]}
        />
      );
    }

    Props

    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)

    Contribute

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

    License

    MIT License © Ganapati V S

    Install

    npm i react-spectrum

    DownloadsWeekly Downloads

    41

    Version

    1.2.3

    License

    MIT

    Unpacked Size

    102 kB

    Total Files

    15

    Last publish

    Collaborators

    • ganapativs