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-code
Usage
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 }
|