ganapativs / React Spectrum
Licence: mit
Generate colorful text placeholders 🎨
Stars: ✭ 289
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to React Spectrum
Dynamic Toasts
Custom toasts with color and icon for Android.
Stars: ✭ 132 (-54.33%)
Mutual labels: library, text
React Component Library
A project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook
Stars: ✭ 313 (+8.3%)
Mutual labels: rollup, library
Baffle
A tiny javascript library for obfuscating and revealing text in DOM elements. 😲
Stars: ✭ 1,721 (+495.5%)
Mutual labels: library, text
Text Minimap
Generate text minimap/preview using Braille Patterns
Stars: ✭ 21 (-92.73%)
Mutual labels: library, text
Egeo
EGEO is the open-source UI library used to build Stratio's UI. It includes UI Components, Utilities, Services and much more to build user interfaces quickly and with ease. The library is distributed in AoT mode.
Stars: ✭ 69 (-76.12%)
Mutual labels: rollup, library
React Cool Img
😎 🏞 A React <Img /> component let you handle image UX and performance as a Pro!
Stars: ✭ 356 (+23.18%)
Mutual labels: placeholder, ssr
React Modern Library Boilerplate
Boilerplate for publishing modern React modules with Rollup
Stars: ✭ 285 (-1.38%)
Mutual labels: rollup, library
Preppy
A simple and lightweight tool for preparing the publish of NPM packages.
Stars: ✭ 23 (-92.04%)
Mutual labels: rollup, library
React Native Blurhash
🖼️ A library to show colorful blurry placeholders while your content loads.
Stars: ✭ 430 (+48.79%)
Mutual labels: library, placeholder
STTextView
📝 STTextView is a light-weight library that adds a placeholder to the UITextView.
Stars: ✭ 36 (-87.54%)
Mutual labels: placeholder, text
Csconsoleformat
.NET C# library for advanced formatting of console output [Apache]
Stars: ✭ 296 (+2.42%)
Mutual labels: library, text
Rskplaceholdertextview
A light-weight UITextView subclass that adds support for placeholder.
Stars: ✭ 192 (-33.56%)
Mutual labels: text, placeholder
Spannabletextview
SpannableTextView is a custom TextView which lets you customize the styling of slice of your text or statment via Spannables, but without the hassle of having to deal directly with Spannable themselves.
Stars: ✭ 177 (-38.75%)
Mutual labels: library, text
Create React Library
⚡CLI for creating reusable react libraries.
Stars: ✭ 4,554 (+1475.78%)
Mutual labels: rollup, library
React Rollup Boilerplate
Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript
Stars: ✭ 157 (-45.67%)
Mutual labels: rollup, library
TextInputLayout
The objective of this code is to guide you to create login screen with TextInputLayout in iOS app.
Stars: ✭ 30 (-89.62%)
Mutual labels: placeholder, text
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 🎊
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].