# react-fake-content > Simple and easy group of components using only CSS to generate content placeholder. Latest version **2.0.0** (published 2023-08-02) · MIT license · 0 weekly downloads ## Install ```sh npm install react-fake-content pnpm add react-fake-content yarn add react-fake-content bun add react-fake-content ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2023-08-02 | | First published | 2019-05-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 2.9 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 7 | | Author | Cezar Sampaio | | Maintainers | cezarluiz0 | | Keywords | react-component, react, placeholder, content, dummy content, fake content | ## Links - npm: https://www.npmjs.com/package/react-fake-content - Repository: https://github.com/cezarsmpio/react-fake-content - Homepage: https://cezarsmpio.github.io/react-fake-content/ - Issues: https://github.com/cezarsmpio/react-fake-content/issues - npm.io page: https://npm.io/package/react-fake-content ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.0 (latest) — 2023-08-02 - 1.1.0 — 2022-05-18 - 1.0.2 — 2021-08-28 - 1.0.0 — 2020-11-15 - 0.3.0 — 2019-05-11 - 0.2.1 — 2019-05-11 - 0.2.0 — 2019-05-11 - 0.1.0 — 2019-05-11 - 0.0.4 — 2019-05-01 - 0.0.3 — 2019-05-01 - 0.0.2 — 2019-05-01 - 0.0.1 — 2019-05-01 ## README # react-fake-content [![https://nodei.co/npm/react-fake-content.png?downloads=true&downloadRank=true&stars=true](https://nodei.co/npm/react-fake-content.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/react-fake-content) [![minified + gzip](https://badgen.net/bundlephobia/minzip/react-fake-content)](https://bundlephobia.com/result?p=react-fake-content) [![npm version](https://img.shields.io/npm/v/react-fake-content.svg)](https://www.npmjs.com/package/react-fake-content) [![npm download](https://img.shields.io/npm/dm/react-fake-content.svg)](https://www.npmjs.com/package/react-fake-content) [![GitHub stars](https://img.shields.io/github/stars/cezarsmpio/react-fake-content.svg?style=social&label=Star)](https://github.com/cezarsmpio/react-fake-content) [![GitHub issues](https://img.shields.io/github/issues/cezarsmpio/react-fake-content.svg)](https://github.com/cezarsmpio/react-fake-content/issues) [![GitHub contributors](https://img.shields.io/github/contributors/cezarsmpio/react-fake-content.svg)](https://GitHub.com/cezarsmpio/react-fake-content/graphs/contributors/) [![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://lbesson.mit-license.org/) ## Demo https://cezarsmpio.github.io/react-fake-content/ ## Install ``` npm install react-fake-content --save ``` ## Usage 👉 React 16.8+ is required. This library uses React Hooks. ```js import { Circle } from 'react-fake-content'; function Avatar(props) { if (!props.loaded) { return } return } ``` ## Components ✅ All components support server-side rendering! ### `` ```js import { Rectangle } from 'react-fake-content'; function Component(props) { return ; } ``` #### `width`: string - required CSS unit to define the widht of the component. #### `height`: string - required CSS unit to define the height of the component. ### `` ```js import { Circle } from 'react-fake-content'; function Component(props) { return ; } ``` #### `size`: string - 60px CSS unit to define either width and height of the component. ### `` ```js import { Line } from 'react-fake-content'; function Component(props) { return ( ); } ``` #### `width`: string - 100% CSS unit to define width of the component. #### `height`: string - 15px CSS unit to define height of the component. ### `` ```js import { Square } from 'react-fake-content'; function Component(props) { return ; } ``` #### `size`: string - 60px CSS unit to define either width and height of the component. ## Properties All properties below are applicable for all components. #### `animation`: boolean - true `false` to disable animation. #### `animationDuration`: number - 1000 Number in miliseconds. #### `animationName`: string - reactFakeContentAnimation CSS animation name. #### `primaryColor`: string - #efefef CSS unit to define the primary color of the component gradient. #### `secondaryColor`: string - #ddd CSS unit to define the secondary color of the component gradient. #### `style`: object - {} A list of CSS properties to be added into the component. #### `as`: string - div Changes the component element to be rendered. #### `responsive`: bool - true The component will adapt to its container size if the value is `true`. Otherwise, it won't resize itself. #### `inline`: bool - false By default, all components are `block`. If you want them rendered as `inline-block`, use `inline={true}` or `style={{ display: 'inline-block' }}`. ## Browser support - Chrome ✅ - Firefox ✅ - Safari ✅ - Opera ✅ - Edge 15+ ✅ - IE11+ ✅ - iOS 9+ ✅ - Android 5+ ✅ Including animations! --- _Source: https://npm.io/package/react-fake-content · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._