Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sorodrigo/react-placehodl
React placeholders made simple. 📌
https://github.com/sorodrigo/react-placehodl
javascript loading placeholder react react-placeholders spinner
Last synced: 2 months ago
JSON representation
React placeholders made simple. 📌
- Host: GitHub
- URL: https://github.com/sorodrigo/react-placehodl
- Owner: sorodrigo
- License: mit
- Created: 2018-03-03T01:14:53.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-30T15:13:25.000Z (almost 7 years ago)
- Last Synced: 2024-10-10T20:20:24.973Z (3 months ago)
- Topics: javascript, loading, placeholder, react, react-placeholders, spinner
- Language: JavaScript
- Homepage:
- Size: 489 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-placehodl 📌
React placeholders made simple.
## Installation
```bash
$ npm i react-placehodl
```
## Motivation
Placeholders are cool. Placeholder are way cooler than spinners. Current libraries implementing
placeholder are super complicated. There's prefabricated components with pre-made styles you must
import, and there's ways to make custom ones that interact with these libraries. This doesn't
really allow much flexibility, which is the motivation of this lib.
## Render Prop
Yeah, yeah, yeah... We're all aware of the hype going on with the render prop. Just happens to be
that a placeholder is the perfect use case for them.
## API
### Props
The `` component has the following props:
- seed => Seed for the size randomizer. (Powered by _fast-random_).
- sizes => Array of size classNames that will be applied to each word.
- prefix => Prefix used in all elements classes.
- className => Root level class name.
- children => Function that gets passed the generator methods.
### Generator methods
- getParagraph => Returns a paragraph composed by lines.
```js
// lines - corresponds with number of lines in the paragraph
// words - corresponds with number of words per line
// size - corresponds with number of size possibilities for each word.
getParagraph(lines: int, words: int, size: int) => (paragraph: jsx)
```
- getLine => Returns a line composed by words
```js
// words - corresponds with number of words in the line
// size - corresponds with number of size possibilities for each word.
getLine(words: int, size: int) => (line: jsx)
```
- getSize => Returns a className corresponding to one of the size possibilities.
```js
// size - corresponds with number of size possibilities in the returned className.
getSize(size: int) => (className: string)
```
## Examples
### Use of getParagraph (works out of the box use case)
```jsx
import Placehodl from 'react-placehodl';
// outputs paragraph with 10 lines, 3 words, 5 sizes
const Placeholder = props => {
return (
{({ getParagraph }) => getParagraph(10, 3, 5)}
);
};
```
### Use of getLine (medium customization use case)
```jsx
import Placehodl from 'react-placehodl';
// outputs line with 3 words, 5 sizes
const Placeholder = props => {
return (
{({ getLine }) => (
{Array(10)
.fill(0)
.map((line, i) => (
{getLine(3, 5)}
))}
)}
);
};
```
### Use of getSize (advanced customization use case)
```jsx
import Placehodl from 'react-placehodl';
// outputs word 5 possible sizes
const Placeholder = props => {
return (
{({ getSize }) => (
{Array(10)
.fill(0)
.map((line, i) => (
{Array(3)
.fill(0)
.map((word, j) => (
))}
))}
)}
);
};
```