react-content-loader

`jsx
import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () =>
`

##### Instagram Style

`jsx
import { Instagram } from 'react-content-loader'

const MyInstagramLoader = () =>
`

##### Code Style

`jsx
import { Code } from 'react-content-loader'

const MyCodeLoader = () =>
`

##### List Style

`jsx
import { List } from 'react-content-loader'

const MyListLoader = () =>
`

##### Bullet list Style

`jsx
import { BulletList } from 'react-content-loader'

const MyBulletListLoader = () =>
`

$3

For the custom mode, use the
online tool.

`jsx
const MyLoader = () => (
height={140}
speed={1}
backgroundColor={'#333'}
foregroundColor={'#999'}
viewBox="0 0 380 70"
>
{/ Only SVG shapes /}




)
`

!Custom

Troubleshooting

#### Responsive - Mobile version

In order to avoid unexpected behavior, the package doesn't have opinioned settings. So if it needs to be responsive, have in mind that the output of the package is a regular SVG, so it just needs the same attributes to become a regular SVG responsive, which means:

`jsx
import { Code } from 'react-content-loader'

const MyCodeLoader = () => (
width={100}
height={100}
viewBox="0 0 100 100"
style={{ width: '100%' }}
/>
)
`

#### Server-side rendering (SSR) - Match snapshot

As the main component generates random values to match the id of the SVG element with background style, it can encounter unexpected errors and unmatching warning on render, once the random value of id will be generated twice, in case of SSR: server and client; or in case of snapshot test: on the first match and re-running the test.

To fix it, set the prop uniqueKey, then the id will not be random anymore:

`jsx
import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () =>
`

#### Alpha is not working: Safari / iOS

When using rgba as a backgroundColor or foregroundColor value, Safari does not respect the alpha channel, meaning that the color will be opaque. To prevent this, instead of using a rgba value for backgroundColor/foregroundColor, use the rgb equivalent and move the alpha channel value to the backgroundOpacity/foregroundOpacity props.

`jsx
{/ Opaque color in Safari and iOS /}
  backgroundColor="rgba(0,0,0,0.06)"
  foregroundColor="rgba(0,0,0,0.12)">


{/_ Semi-transparent color in Safari and iOS _/}
    backgroundColor="rgb(0,0,0)"
    foregroundColor="rgb(0,0,0)"
    backgroundOpacity={0.06}
    foregroundOpacity={0.12}>


`

#### Black box in Safari / iOS (again)

Using the base tag on a page that contains SVG elements fails to render and it looks like a black box. Just remove the base-href tag from the  and the issue has been solved.

See: #93 / 109

#### Browser supports SVG-Animate

Old browsers don't support animation in SVG (compatibility list), and if your project must support IE, for examples, here's a couple of ways to make sure that browser supports SVG Animate:

- window.SVGAnimateElement
- document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")
- Or even use https://modernizr.com/

Similar packages

- React Native: rn-placeholder, react-native-svg-animated-linear-gradient;
- Preact;
- Vue.js: vue-content-loading, vue-content-loader;
- Angular: ngx-content-loading, ngx-content-loader.

---

Development

Fork the repo and then clone it

`
$ git clone git@github.com:YourUsername/react-content-loader.git && cd react-content-loader
`

$ npm i: Install the dependencies;

$ npm run build: Build to production;

$ npm run dev: Run the Storybook to see your changes;

$ npm run test: Run all tests: type checking, unit tests on web and native;

$ npm run test:watch: Watch unit tests;

$3

As React Native doesn't support symbolic links (to link the dependency to another folder) and as there is no playground to check your contributions (like storybook), this is recommended strategy to run the project locally:

1. Create a new React Native from scratch, either Metro or create-react-native-app;
2. Install the dependency to your root project:
yarn add react-content-loader react-native-svg
3. Open the project just created and clone this repository there;
4. Create your loading component and point the react-content-loader to the project just cloned, like:
import ContentLoader, { Rect, Circle } from './react-content-loader/native'

$3

Commit messages should follow the commit message convention so, changelogs could be generated automatically by that. Commit messages are validated automatically upon commit. If you aren't familiar with the commit message convention, you can use yarn commit (or npm run commit`) instead of git commit, which provides an interactive CLI for generating proper commit messages.

License

MIT