{"id":19453677,"url":"https://github.com/ganapativs/react-spectrum","last_synced_at":"2025-05-15T13:02:54.934Z","repository":{"id":36669223,"uuid":"229424324","full_name":"ganapativs/react-spectrum","owner":"ganapativs","description":"Generate colorful text placeholders 🎨","archived":false,"fork":false,"pushed_at":"2025-01-14T09:29:37.000Z","size":6258,"stargazers_count":314,"open_issues_count":10,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T18:06:18.302Z","etag":null,"topics":["codesandbox","colorful","generated","illustration","javascript","library","placeholder","react","rollup","spectrum","ssr","text"],"latest_commit_sha":null,"homepage":"https://react-spectrum.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ganapativs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-21T12:28:27.000Z","updated_at":"2025-04-02T07:00:44.000Z","dependencies_parsed_at":"2025-01-24T19:11:00.989Z","dependency_job_id":"cebed469-0b67-4ba8-9a10-955b42bfa950","html_url":"https://github.com/ganapativs/react-spectrum","commit_stats":{"total_commits":55,"total_committers":6,"mean_commits":9.166666666666666,"dds":"0.18181818181818177","last_synced_commit":"0b0a9f82cb39e93693a7bfdce5060a2abc33bb61"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganapativs%2Freact-spectrum","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganapativs%2Freact-spectrum/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganapativs%2Freact-spectrum/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganapativs%2Freact-spectrum/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ganapativs","download_url":"https://codeload.github.com/ganapativs/react-spectrum/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248961014,"owners_count":21189990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codesandbox","colorful","generated","illustration","javascript","library","placeholder","react","rollup","spectrum","ssr","text"],"created_at":"2024-11-10T17:05:26.203Z","updated_at":"2025-04-14T20:52:43.190Z","avatar_url":"https://github.com/ganapativs.png","language":"TypeScript","funding_links":[],"categories":["🌐 Web Development - Frontend"],"sub_categories":[],"readme":"\u003cp align=\"left\"\u003e\n  \u003cimg src=\"./assets/samples/1.png\" alt=\"1\" width=\"260\"\u003e\n  \u003cimg src=\"./assets/samples/2.png\" alt=\"2\" width=\"260\"\u003e\n  \u003cimg src=\"./assets/samples/3.png\" alt=\"3\" width=\"260\"\u003e\n  \u003cimg src=\"./assets/samples/4.png\" alt=\"4\" width=\"260\"\u003e\n  \u003cimg src=\"./assets/samples/5.png\" alt=\"5\" width=\"260\"\u003e\n  \u003cimg src=\"./assets/samples/6.png\" alt=\"6\" width=\"260\"\u003e\n\u003c/p\u003e\n\n# React Spectrum\n\nA tiny(**around 1.3kb gzip**) React library to generate colorful text placeholders 🎨\n\nInspired by [this code illustration](./assets/codesandbox-illustration.png) on [CodeSandbox](https://codesandbox.io) homepage 🙏\n\nTry out the generator at [react-spectrum.netlify.app](https://react-spectrum.netlify.app) 🎊 Also, check out [@BotSpectrum](https://twitter.com/BotSpectrum) twitter bot that tweets randomly generated colorful text placeholders for inspiration 🎊\n\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)\n[![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ganapativs/react-spectrum/)\n[![Build Status](https://travis-ci.com/ganapativs/react-spectrum.svg?branch=master)](https://travis-ci.com/ganapativs/react-spectrum)\n[![npm version](https://badge.fury.io/js/react-spectrum.svg)](https://badge.fury.io/js/react-spectrum)\n[![GitHub version](https://badge.fury.io/gh/ganapativs%2Freact-spectrum.svg)](https://badge.fury.io/gh/ganapativs%2Freact-spectrum)\n[![Greenkeeper badge](https://badges.greenkeeper.io/ganapativs/react-spectrum.svg)](https://greenkeeper.io/)\n\n## Demo\n\n- [Basic](https://codesandbox.io/s/react-spectrum-demo-83c90)\n- [Advanced](https://codesandbox.io/s/react-spectrum-demo-advanced-kh7zy)\n- [Animating using CSS](https://codesandbox.io/s/react-spectrum-animation-vp353)\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [Props](#props)\n- [Contribute](#contribute)\n- [License](#license)\n\n## Install\n\n### NPM\n\n```sh\nnpm install react-spectrum\n```\n\n### Yarn\n\n```sh\nyarn add react-spectrum\n```\n\n### UMD build\n\n```html\n\u003cscript src=\"https://unpkg.com/react-spectrum/dist/react-spectrum.umd.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\n// Import library\nimport Spectrum from \"react-spectrum\";\n// or const Spectrum = require('react-spectrum');\n\n// Render the placeholder\nfunction Placeholder() {\n  return (\n    \u003cSpectrum\n      width={500}\n      colors={[\"#757575\", \"#999999\", \"#0871F2\", \"#BF5AF2\"]}\n    /\u003e\n  );\n}\n```\n\n## Props\n\n| Property      | Type          | Default       | Description |\n| ------------- | ------------- | ------------- | ----------- |\n| `width` | `number` | `500` | Width of the placeholder container |\n| `colors` | `Array\u003cstring\u003e` | `['#eee']` | Possible colors of words, will be picked randomly |\n| `wordWidths` | `Array\u003cnumber\u003e` | `[30, 60, 90, 120, 150]` | Possible widths of words, will be picked randomly |\n| `wordDistances` | `Array\u003cnumber\u003e` | `[4, 8, 12]` | Possible distance between words, will be picked randomly |\n| `wordHeight` | `number` | `12` | Height of every word placeholder |\n| `wordRadius` | `number` | `20` | Border radius of every word |\n| `lineDistance` | `number` | `12` | Distance(margin) between the lines |\n| `linesPerParagraph` | `number` | `8` |  Lines per paragraph. if there are multiple paragraphs, all of them will have same number of lines |\n| `paragraphs` | `number` | `1` | Number of paragraphs in the placeholder |\n| `paragraphDistance` | `number` | `24` | Distance(margin) between the paragraphs |\n| `truncateLastLine` | `boolean` | `true` | Show less words in the last line for more natural feel |\n| `renderWord` | `function` | `({ key, style}) =\u003e \u003cspan key={key} style={style} /\u003e` | Render word with customizations(avoid overriding passed style properties. it might break the functionality) |\n\n## Contribute\n\nThanks for taking the time to contribute, please check out the [src](src) to understand how things work.\n\n### Reporting Issues\n\nFound a problem? Want a new feature? First of all, see if your issue or idea has [already been reported](../../issues).\nIf don't, just open a [new clear and descriptive issue](../../issues/new).\n\n### Submitting pull requests\n\nPull requests are the greatest contributions, so be sure they are focused in scope and do avoid unrelated commits.\n\n- Fork it!\n- Clone your fork: `git clone https://github.com/\u003cyour-username\u003e/react-spectrum`\n- Navigate to the newly cloned directory: `cd react-spectrum`\n- Create a new branch for the new feature: `git checkout -b my-new-feature`\n- Install the tools necessary for development: `yarn`\n- Make your changes.\n- Commit your changes: `git commit -am 'Add some feature'`\n- Push to the branch: `git push origin my-new-feature`\n- Submit a pull request with full remarks documenting your changes\n\n## License\n\nThis project is licensed under **The MIT License (MIT)**, see the [LICENSE](LICENSE) file for more details.\n\nThis project is tested with BrowserStack.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fganapativs%2Freact-spectrum","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fganapativs%2Freact-spectrum","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fganapativs%2Freact-spectrum/lists"}