React-fake-code NPM

React Fake Code

A React component that generates random (or predefined), customizable, colorful skeleton code purposed for beautiful tech landing pages.

npm i react-fake-code

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

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