Snippet

The Snippet component is used to display blocks of code or text with a convenient copy-to-clipboard feature. It supports customization through different accent colors and can optionally display a command-line prompt before each line.

Usage

First of all, you need to import the Snippet component from the kitchn package.

import { Snippet } from "kitchn"

Default

npm install kitchn

Code Editor

<Snippet text={"npm install kitchn"} w={300} />

Multi-line

git init

git add .

git commit -m 'Initial commit'

Code Editor

<Snippet text={[ "git init", "git add .", "git commit -m 'Initial commit'", ]} />

No prompt

npm install kitchn

Code Editor

<Snippet text={"npm install kitchn"} w={300} prompt={false} />

Callback

npm install kitchn

Code Editor

<Snippet text={"npm install kitchn"} w={300} onCopy={() => alert("copied")} />

Type

npm install kitchn

npm install kitchn

npm install kitchn

Code Editor

<Container gap={"small"}>
  <Snippet text={"npm install kitchn"} w={300} type={"success"} />
  <Snippet text={"npm install kitchn"} w={300} type={"warning"} />
  <Snippet text={"npm install kitchn"} w={300} type={"danger"} />
</Container>

Props

Name	Type	Default	Required	Description
`text`	`string \| string[]`	`""`	Yes	The text or code to be displayed in the snippet. Can be a single string or an array of strings for multi-line snippets.
`prompt`	`boolean`	`true`	No	If `true`, displays a command-line prompt (`$`) before each line of text.
`type`	`keyof AccentColors`	`"primary"`	No	Defines the accent color for the snippet.
`onCopy`	`(text: string) => void`	`null`	No	Callback function that gets triggered when the text is copied.

Last updated on October 8, 2024

Skeleton Spacer