Code snippet

The CodeSnippet component displays a single-line snippet of code with a copy-to-clipboard button. It supports different visual variants.

Default

A default inline snippet with monospace font and copy button.

npm install @talkjs/ui

<CodeSnippet code="npm install @talkjs/ui" width="w-[400px]" />

Inverted

Use variant=“inverted” to invert the snippet background and text.

npm install @talkjs/ui

<CodeSnippet code="npm install @talkjs/ui" variant="inverted" width="w-[400px]" />

Variants

You can use color variants like blue and pink for emphasis. The copy button can also be displayed as icon or text only.

npm install @talkjs/ui

<CodeSnippet code="npm install @talkjs/ui" variant="blue" copyVariant="icon" />

<CodeSnippet code="npm install @talkjs/ui" variant="pink" copyVariant="icon" />

Multiline

To display a multiline code snippet, pass a multiline string to the code prop. Use variant and copyVariant to style it.

import { Session, Chatbox } from "@talkjs/react";

<Session appId="t824ba8" userId="pete">
  <Chatbox conversation="workshop" className="chatbox" />
</Session>

<CodeSnippet
  code={`import { Session, Chatbox } from "@talkjs/react";

<Session appId="t824ba8" userId="pete">
  <Chatbox conversation="workshop" className="chatbox" />
</Session>`}
  copyVariant="icon"
  variant="blue"
/>

Usage

Import the CodeSnippet component and pass a single-line string as code. The component can be referenced using the following format:

import CodeSnippet from "../../components/CodeSnippet";