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
• Usage
• License

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

License

MIT © Luiz Fernando Schiestl Alexandre