Code Block

A code block component that animates the code as it is written.

delay

duration

writing

cursor

Installation

<CodeBlock code="console.log('Hello, world!');" lang="javascript" />

Prop	Type	Default
`code`	`string`	-
`lang`	`string`	-
`theme?`	`"light" \| "dark"`	`light`
`themes?`	`{ light: string; dark: string }`	`{ light: "github-light", dark: "github-dark" }`
`writing?`	`boolean`	`false`
`duration?`	`number`	`5000`
`delay?`	`number`	`0`
`onDone?`	`() => void`	-
`onWrite?`	`(info: { index: number; length: number; done: boolean }) => void`	-
`scrollContainerRef?`	`React.RefObject<HTMLElement \| null>`	-
`inView?`	`boolean`	`false`
`inViewMargin?`	`string`	`0px`
`inViewOnce?`	`boolean`	`true`
`...props?`	`React.ComponentProps<"div">`	-

Built by Skyleen. The source code is available on GitHub.