Snippet

A customizable code snippet component for React with copy functionality, syntax highlighting, and advanced features.

About

The Snippet component provides an easy way to display and copy code snippets in your React application. It supports syntax highlighting, custom styling, collapsible snippets, multi-snippet support, and various configuration options.

Installation

Install the component using your preferred package manager:

npx install @polyblock/snippet

Or manually add the component to your project.

Usage

Import and use the Snippet and SnippetColor components in your React application:

import { Snippet, SnippetColor } from '@/components/polyblock/snippet'

export default function MyComponent() {
  return (
    <Snippet language="javascript">
      This is a PolyBlock Snippet component with <SnippetColor className="text-rose-500">colored text</SnippetColor>!
    </Snippet>
  )
}

Examples

Basic Usage

This is a Basic Usage Snippet!

Colored Text

This Snippet has COLOR

Custom Variants

This is a Custom Variant Snippet!

With Symbol

$This Snippet has a symbol

To hide the symbol, simply omit the symbol prop or set it to null or an empty string.

Custom Display Content

Custom Display Content
This is custom content displayed instead of the actual code.
A PolyBlock Component

With Multiple Snippets

// Initiate neural interface to download cyberpunk quotes

Collapsible Snippet

This is a collapsible snippet
This component is engineered based on Shadcn's collapsible snippet.

API Reference

The Snippet component accepts the following props:

Prop	Type	Description	Default
language	string	The programming language for syntax highlighting	"plaintext"
SnippetColor	Component	A component to add colored text within a Snippet	-
variant	"default" \| "outline" \| "custom"	The visual style variant	"default"
size	"default" \| "sm" \| "lg" \| null	The size of the component	"default"
symbol	string \| ReactNode	The symbol to display before each line	-
timeout	number	Duration for which the "Copied" message is displayed (ms)	2000
codeString	string	The code to be copied (if different from displayed content)	-
displayContent	ReactNode	Custom JSX to display instead of the code	-
snippets	Array	Array of objects with label and code for multiple snippets	-
disableTooltip	boolean	Disable the copy button tooltip	false
disableCopy	boolean	Disable the copy functionality	false
hideCopyButton	boolean	Hide the copy button	false
disableAnimation	boolean	Disable animations on the copy button	false
onCopyText	function	Callback function called when text is copied	-
collapsible	boolean	Make the snippet collapsible	false
defaultOpen	boolean	Default open state for collapsible snippets	false

Advanced Usage

Internal Context Usage

The Snippet component uses SnippetContext internally to manage multiline snippets, consistent symbol display (when provided), and styling across nested components. This context is crucial for maintaining functionality in complex snippets but is handled automatically by the component.

Multiline Snippets

The Snippet component efficiently handles multiline code snippets, ensuring consistent formatting and symbol display across all lines. This is managed internally through the SnippetContext.

Colored Text with SnippetColor

The SnippetColor component allows you to add colored text within your Snippet. This is useful for highlighting specific parts of your code without affecting the copied text. Use it by wrapping the text you want to color with SnippetColor and providing a className for the desired color.

Syntax Highlighting Integration

While the component supports different languages, you may need to integrate with a syntax highlighting library for more advanced highlighting. Refer to the documentation of your chosen syntax highlighting library for integration details.

Accessibility

The Snippet component is designed with accessibility in mind. The copy button supports keyboard navigation and includes appropriate ARIA attributes.

Performance Considerations

For very large code snippets, consider using the collapsible feature to improve initial load performance. This allows users to expand the snippet only when needed.

Nested Components

The SnippetCopy component is designed to work within the Snippet component. The internal context ensures that styling and functionality are consistent even in complex, nested structures.