React Fake Code 
A React component that generates random (or predefined), customizable, colorful skeleton code purposed for beautiful tech landing pages.
Table of Contents
Installation
npm i react-fake-codeUsage
You can use the component prop-emptied. This will generate random fake code based on the default props.
import { FakeCode } from "react-fake-code";
function MyComponent() {
return <FakeCode />;
}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[]
|
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 }
|