# react-fake-code
> A React component that generates random (or predefined), customizable, colorful skeleton code purposed for beautiful tech landing pages.
Latest version **1.1.0-candidate.1** (published 2022-06-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-fake-code
pnpm add react-fake-code
yarn add react-fake-code
bun add react-fake-code
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.0-candidate.1 |
| Published | 2022-06-07 |
| First published | 2022-06-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Luiz Schiestl |
| Maintainers | devluiz |
| Keywords | color, design, ghost, react, fake, code, skeleton |
## Links
- npm: https://www.npmjs.com/package/react-fake-code
- Repository: https://github.com/luizschiestl/react-fake-code
- Homepage: https://reactfakecode.devluiz.com
- Issues: https://github.com/luizschiestl/react-fake-code/issues
- npm.io page: https://npm.io/package/react-fake-code
## Alternatives
- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads
- [datasets-fi-postalcodes](https://npm.io/package/datasets-fi-postalcodes.md) — 1.1K weekly downloads
## Recent versions
- 1.1.0-candidate.1 (latest) — 2022-06-07
- 1.1.0 — 2022-06-03
- 1.1.0-alpha.hotfix.2 — 2022-06-02
- 1.1.0-alpha.hotfix.1 — 2022-06-02
- 1.1.0-alpha.1 — 2022-06-02
- 1.0.2-hotfix.2 — 2022-06-02
- 1.0.2-hotfix.1 — 2022-06-02
- 1.0.2 — 2022-06-02
- 1.0.1 — 2022-06-02
- 1.0.0 — 2022-06-02
## README
#
# React Fake Code 
A React component that generates random (or predefined), customizable, colorful skeleton code purposed for beautiful tech landing pages.
## Table of Contents
- Demo
- [Installation](#installation)
- [Usage](#usage)
- [License](#license)
## Installation
```sh
npm i react-fake-code
```
## Usage
You can use the component prop-emptied. This will generate random fake code based on the default props.
```js
import { FakeCode } from "react-fake-code";
function MyComponent() {
return ;
}
```
### Options
| Prop name | Prop type | Description |
| --------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| animationTime | `number` | Total duration in seconds of the fake typing animation.
Default value: `2` |
| colors | `string[]` | Colors of the fake words.
Default value: `["#ffb86c", "#ff79c6", "#50fa7b", "#bd93f9", "#ff5555"]` (Dracula theme colors) |
| minLines | `number` | Minimum number of lines of code.
Default value: `5` |
| maxLines | `number` | Maximum number of lines of code.
Default value: `8` |
| minWordsPerLine | `number` | Minimum number of fake words per line.
Default value: `2` |
| maxWordsPerLine | `number` | Maximum number of fake words per line.
Default value: `5` |
| minWordWidth | `number` | Minimum width of words.
Default value: `15` |
| maxWordsPerLine | `number` | Maximum width of words.
Default value: `45` |
| maxIndent | `number` | Maximum indentation of lines.
Default value: `45` |
| predefinedLines | [`LineType`](src/FakeCode/types/LineType.ts)`[]` | You can ignore the random fake code generator and use your own fake code object.
Example: `[{ indent: 0, words: [{ width: 45, color: "#ffb86c" }] }, { indent: 1, words: [{ width: 34, color: "#ff79c6" }, { width: 40, color: "#50fa7b" }] }]` |
| tabWidth | `number` | Width of fake indentation tab.
Default value: `20` |
| wordStyle | `React.CSSProperties` | Increment or override the fake word style.
Example: `{ height: 20, borderRadius: 14 }` |
## License
[MIT](LICENSE) © [Luiz Fernando Schiestl Alexandre](https://github.com/luizschiestl/)
---
_Source: https://npm.io/package/react-fake-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._