Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danilowoz/react-content-loader
⚪ SVG-Powered component to easily create skeleton loadings.
https://github.com/danilowoz/react-content-loader
facebook-cards-loaders hacktoberfest loader loading placeholder react react-native react-native-components skeleton skeleton-screen svg
Last synced: 3 days ago
JSON representation
⚪ SVG-Powered component to easily create skeleton loadings.
- Host: GitHub
- URL: https://github.com/danilowoz/react-content-loader
- Owner: danilowoz
- License: mit
- Created: 2017-01-20T00:30:11.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-22T20:17:50.000Z (about 2 months ago)
- Last Synced: 2024-11-30T04:40:06.015Z (12 days ago)
- Topics: facebook-cards-loaders, hacktoberfest, loader, loading, placeholder, react, react-native, react-native-components, skeleton, skeleton-screen, svg
- Language: TypeScript
- Homepage: https://skeletonreact.com
- Size: 7.3 MB
- Stars: 13,780
- Watchers: 85
- Forks: 421
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react-components - react-content-loader - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). (UI Components / Loader)
- awesome-react - react-content-loader - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).  (UI Components / Loader)
- awesome-github-star - react-content-loader - Powered component to easily create skeleton loadings. | danilowoz | 13077 | (TypeScript)
- awesome-list - react-content-loader 骨架屏
- awesome-starts - danilowoz/react-content-loader - ⚪ SVG-Powered component to easily create skeleton loadings. (TypeScript)
- awesome-repos - react-content-loader
- awesome-list - react-content-loader - Powered component to easily create skeleton loadings. | danilowoz | 11326 | (TypeScript)
- awesome-react-components - react-content-loader - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). (UI Components / Loader)
- best-of-react - GitHub - 10% open · ⏱️ 08.03.2024): (Other Components)
- fucking-awesome-react-components - react-content-loader - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). (UI Components / Loader)
- awesome-star-libs - danilowoz / react-content-loader
- StarryDivineSky - danilowoz/react-content-loader
- awesome - danilowoz/react-content-loader - ⚪ SVG-Powered component to easily create skeleton loadings. (TypeScript)
README
SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
## Features
- :gear: **Customizable:** Feel free to change the colors, speed, sizes, and even **RTL**;
- :ok_hand: **Plug and play:** with many presets to use, see the [examples](http://danilowoz.com/create-content-loader/#gallery);
- :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.com/create-content-loader) to create your own custom loaders easily;
- 📱 **React Native support**: same API, as same powerful features;
- ⚛️ **Really lightweight:** less than **2kB** and **0 dependencies** for web version;
## Index
- [Getting Started](#gettingstarted)
- [Usage](#usage)
- [Native](#native)
- [Options](#options)
- [Examples](#examples)
- [Troubleshooting](#troubleshooting)
- [Similar packages](#similarpackages)
- [Development](#development)
## Getting Started
```sh
npm i react-content-loader --save
```
```sh
yarn add react-content-loader
```
### For React Native
```sh
npm i react-content-loader react-native-svg --save
```
```sh
yarn add react-content-loader react-native-svg
```
CDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)
## Usage
There are two ways to use it:
**1. Presets, see the [examples](https://danilowoz.com/react-content-loader/):**
```jsx
import ContentLoader, { Facebook } from 'react-content-loader'
const MyLoader = () =>
const MyFacebookLoader = () =>
```
**2. Custom mode, see the [online tool](https://danilowoz.com/create-content-loader)**
```jsx
const MyLoader = () => (
{/* Only SVG shapes */}
)
```
**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)
Or try the components editable demo hands-on and install it from [bit.dev](https://bit.dev/danilowoz/react-content-loader)
## Native
`react-content-loader` can be used with React Native in the same way as web version with the same import:
**1. Presets, see the [examples](#examples):**
```jsx
import ContentLoader, { Facebook } from 'react-content-loader/native'
const MyLoader = () =>
const MyFacebookLoader = () =>
```
**2. Custom mode**
**To create custom loaders there is an important difference:** as React Native doesn't have any native module for SVG components, it's necessary to import the shapes from [react-native-svg](https://github.com/react-native-community/react-native-svg) or use the named export Rect and Circle from `react-content-loader` import:
```jsx
import ContentLoader, { Rect, Circle } from 'react-content-loader/native'
const MyLoader = () => (
)
```
## Options
|
Prop name and type | Environment | Description |
| ---------------------------------------------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`animate?: boolean`**
Defaults to `true` | React DOM
React Native | Opt-out of animations with `false` |
| **`title?: string`**
Defaults to `Loading...` | React DOM only | It's used to describe what element it is.
Use `''` (empty string) to remove. |
| **`baseUrl?: string`**
Defaults to an empty string | React DOM only | Required if you're using `` document `