mirror of
https://github.com/zhigang1992/react-content-loader.git
synced 2026-04-23 20:00:57 +08:00
bfd2707d79
* test(Refactor): (#117) * test(Refactor): * Holder / SVG tests * Svg tests * Removed old tests * Coverage * Migrate to travis * Update travis * Update travis * ci(Release): * test(package): * ci(Travis): * chore(devDependencies): Package to generate the changelog * feat(Codebase): Format * feat(Types): Export types * ci(Build step): * feat(RTL): Flip the content BREAKING CHANGE: Flip all content instead of only flip the animation direction Closes #122 * Migrate codebase to Typescript (#120) * Ignore rpt2_cache * Add typescript pkg; Add tsc runner script * Replace babel with ts compiler * Typescript configs * Update lockfile * Convert Holder to tsx * Convert svg to tsx * Convert index.js to ts * Convert uid to ts * Convert BulletListStyle to tsx * Convert CodeStyle to tsx * Convert FacebookStyle to tsx * Convert InstagramStyle to tsx * Convert ListStyle to tsx * Remove flow preset * Add ts-node for ts execustion env for nodejs * Remove flow preset & rollup-babel plugin; Add ts-node for ts env in nodejs * Update lockfile * Update watch script for tsc * Rename IProps to IContentLoaderProps; Use FC for validation * Remove unwanted ISvgProps; import IContentLoaderProps for type validations * import and re-export IContentLoaderProps for better types * Import and use types from IContentLoaderProps * Remove eslint; replaced by tslint and tslint-prettier * Add tslint-config-prettier * Implement stricter type checking * Remove comments as it is handled by tslint-config-prettier now * Replace lint by tsc * remove eslint and flow configs * Add style default props * Add jest options to include ts test files * Add options to load json file * Migrate tests from JS to TS for better interoperability * Updated snapshots * Remove ts-node * Break line after react import * Remove export from bottom of file and move to component definition BREAKING CHANGE: Migrate codebase to typescript Closes #120
67 lines
3.9 KiB
Plaintext
67 lines
3.9 KiB
Plaintext
---
|
|
name: Home
|
|
route: /
|
|
---
|
|
|
|
# Introduction
|
|
|
|
<p align="center">
|
|
<img width="350" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png" />
|
|
</p>
|
|
<p align="center">
|
|
<img width="400" alt="Example's react-content-loader" src="https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif" />
|
|
</p>
|
|
|
|
React component that uses SVG to create a collection of loaders which simulates
|
|
the structure of the content that will be loaded, similar to Facebook cards loaders.
|
|
|
|
## Features
|
|
|
|
- :gear: **Completely customizable:** you can change the colors, speed, sizes and even with RTL content support;
|
|
- :pencil2: **Create your own loading:** use the
|
|
[create-content-loader](https://danilowoz.github.io/create-content-loader/) to create
|
|
your own custom loadings easily;
|
|
- :ok_hand: **You can use right now:** there are a lot of presets to use it, see the
|
|
[examples](usage#different-type-of-loaders);
|
|
- :rocket: **Performance:** written using only the SVG API.
|
|
|
|
## Installation
|
|
|
|
Yarn: `yarn add react-content-loader`
|
|
|
|
Npm: `npm i react-content-loader --save`
|
|
|
|
CDN: [from JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)
|
|
|
|
**You can use it in two ways ([See the options)](#options):**
|
|
|
|
```jsx
|
|
// import the component
|
|
import ContentLoader, { Facebook } from 'react-content-loader'
|
|
|
|
const MyLoader = () => <ContentLoader />
|
|
const MyFacebookLoader = () => <Facebook />
|
|
```
|
|
|
|
**Or in custom mode, using the
|
|
[online tool](https://danilowoz.github.io/create-react-content-loader/)**
|
|
|
|
## Options
|
|
|
|
| Name | Type | Default | Description |
|
|
| ----------------------- | ------------------ | ---------------------- | ------------------------------------------------------------------------- |
|
|
| **animate** | `Boolean` | `true` | `false` to render with no animation |
|
|
| **ariaLabel** | `String | Boolean` | `Loading interface...` | Describe what element it is |
|
|
| **speed** | `Number` | `2` | Animation speed in seconds |
|
|
| **className** | `String` | `` | Classname in the `<svg/>` |
|
|
| **width** | `Number` | `400` | viewBox width of `<svg/>` |
|
|
| **height** | `Number` | `130` | viewBox height of `<svg/>` |
|
|
| **rtl** | `Boolean` | `false` | Right-to-left animation |
|
|
| **preserveAspectRatio** | `String` | `xMidYMid meet` | Aspect ratio option of `<svg/>` |
|
|
| **primaryColor** | `String` | `#f3f3f3` | Background |
|
|
| **secondaryColor** | `String` | `#ecebeb` | Animation color |
|
|
| **primaryOpacity** | `Number` | `1` | Background opacity (0 = transparent, 1 = opaque) |
|
|
| **secondaryOpacity** | `Number` | `1` | Animation opacity (0 = transparent, 1 = opaque) |
|
|
| **style** | `Object` | `null` | Ex: `{ width: '100%', height: '70px' }` |
|
|
| **uniquekey** | `String` | random unique id | Use the same value of prop key, that will solve inconsistency on the SSR. |
|