Snippet

The Snippet component is designed to display inline or multiline code snippets or commands, providing an easy way to copy them to the clipboard.

Installation

$ cbui-cli install @crossbuildui/snippet

To get started, please make sure you have installed cbui-cli globally and authenticated your account. This will ensure you can access all the necessary features.

View documents

Import

index.tsx

import { Snippet } from '@/crossbuildui/snippet';
// Required for copy functionality:
// import * as Clipboard from 'expo-clipboard';
// For default copy/check icons (or custom icons):
// import Icon from 'react-native-vector-icons/MaterialIcons';

The Snippet component relies on expo-clipboard for its copy-to-clipboard functionality and react-native-vector-icons/MaterialIcons for the default copy/check icons. Ensure these are installed and configured in your project.

Basic Usage

Provide string children to display a simple snippet. Use the symbol prop to change the leading symbol. If children is complex ReactNode, use codeString for accurate copying.

index.tsx

<Snippet>npm install @crossbuildui/snippet</Snippet>

<Snippet symbol="#">yarn add @crossbuildui/snippet</Snippet>

<Snippet codeString="Just this part is copied">
  <Text>Display text can be <Text style={{fontWeight: 'bold'}}>ReactNode</Text></Text>
</Snippet>

Multiline Snippets

Set multiline= to enable multiline display. You can optionally provide maxLines to limit the visible height and enable scrolling.

index.tsx

<Snippet multiline maxLines={3}>
  {`function greet(name) {
    // This is a multiline snippet
    // It will scroll if content exceeds maxLines
    console.log("Hello, " + name + "!");
  }
  greet("World");`}
</Snippet>

Sizes

Adjust padding, font size, and icon size using the size prop: 'sm', 'md' (default), or 'lg'.

index.tsx

<Snippet size="sm">Small snippet content</Snippet>
<Snippet size="md" style={{marginTop: 8}}>Medium snippet (default)</Snippet>
<Snippet size="lg" style={{marginTop: 8}}>Large snippet content</Snippet>

Radius

Control the border radius of the snippet container with the radius prop.

index.tsx

<Snippet radius="none">No radius</Snippet>
<Snippet radius="sm" style={{marginTop: 8}}>Small radius</Snippet>
<Snippet radius="md" style={{marginTop: 8}}>Medium radius (default)</Snippet>
<Snippet radius="lg" style={{marginTop: 8}}>Large radius</Snippet>

Symbols

Hide the default symbol with hideSymbol, or provide a custom string or ReactNode to the symbol prop.

index.tsx

<Snippet hideSymbol>No symbol here</Snippet>

{/* Example using a hypothetical Icon component */}
{/* <Snippet symbol={<Icon name="code-tags" size={16} />} style={{marginTop: 8}}>
  Custom icon symbol
</Snippet> */}

<Snippet symbol="❯" style={{marginTop: 8}}>
  Custom string symbol
</Snippet>

Copy Functionality

Disable copying with disableCopy. Customize the copy and check (copied state) icons using copyIcon and checkIcon. Provide specific text for copying via codeString. Use onCopy for a callback after successful copy.

index.tsx

<Snippet disableCopy style={{marginBottom: 8}}>
  Copying is disabled for this snippet.
</Snippet>

{/* Example using hypothetical Icon components */}
{/* <Snippet
  copyIcon={<Icon name="content-paste" size={16} />}
  checkIcon={<Icon name="check-circle" size={16} color="green" />}
  style={{marginBottom: 8}}
>
  Snippet with custom copy and check icons.
</Snippet> */}

<Snippet
  codeString="This specific text will be copied."
  onCopy={() => alert('Copied custom text!')}
>
  The displayed text is different from the copied text.
</Snippet>

Animations

The copy icon animates to a check icon upon successful copy. Disable this animation with disableAnimation.

index.tsx

<Snippet disableAnimation>
  No animation on copy icon change for this snippet.
</Snippet>

Props Overview

PROP	TYPE	DEFAULT	DESCRIPTION
`children`	`ReactNode \| ReactNode[]`	-	Content of the snippet. String children are copied by default.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Visual size (padding, font).
`radius`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Border radius.
`symbol`	`string \| ReactNode`	'$'	Leading symbol.
`timeout`	`number`	2000	Duration (ms) for copied state.
`codeString`	`string`	-	Explicit string to copy, overrides children for copy action.
`copyIcon`	`ReactNode`	-	Custom copy icon.
`checkIcon`	`ReactNode`	-	Custom check (copied) icon.
`disableCopy`	`boolean`	`false`	Disable copy button.
`hideSymbol`	`boolean`	`false`	Hide the symbol.
`disableAnimation`	`boolean`	`false`	Disable copy state animations.
`styles`	`Partial<SnippetStyleSlots>`	-	Custom styles for component slots.
`style`	`StyleProp<ViewStyle>`	-	Style for the outermost container.
`onCopy`	`() => void`	-	Callback on successful copy.
`multiline`	`boolean`	`false`	Enable multiline display.
`maxLines`	`number`	-	Max lines for multiline before scrolling.

Styling

Customize the appearance using:

style: Applied to the outermost wrapper View of the component.
styles (slot styles): An object to style specific internal parts:
- base: The main wrapper. Default background and border are theme-dependent (colors.default['100'], colors.default['300']).
- symbolContainer: Container for the symbol.
- symbolText: Style for the symbol if it's a string. Default color is colors.foreground.
- contentWrapper: Wrapper for the children content.
- text: Style for the default Text wrapper around string children. Default color is colors.foreground. Uses monospaced font.
- copyButton: The copy button Pressable area.
- scrollableView: The ScrollView style for multiline snippets.
- scrollContent: The contentContainerStyle for the ScrollView.

The component uses a monospaced font (Menlo for iOS, monospace for Android) for string children and symbols by default. If complex ReactNode is passed as children, you are responsible for its styling, including font family.

index.tsx

<Snippet
  style={{ marginVertical: 10, borderColor: 'purple', borderWidth: 2 }} // Styles the outermost wrapper
  styles={{
    base: { backgroundColor: 'lightyellow' }, // Overrides default background/border, applied to wrapper
    symbolContainer: { paddingRight: 12 },
    symbolText: { color: 'orange', fontWeight: 'bold' },
    contentWrapper: { flexShrink: 1 }, // Allow content to shrink if needed
    text: { color: 'darkblue', fontStyle: 'italic' }, // Styles the Text wrapper for string children
    copyButton: { padding: 6, backgroundColor: 'rgba(0,0,0,0.1)' },
    scrollableView: { maxHeight: 80 } // For multiline with maxLines
  }}
  symbol=">"
  multiline
>
  This is a styled snippet.
  It demonstrates custom styles for various slots.
  The text color and symbol are customized.
</Snippet>

Accessibility

The Snippet component includes accessibility features:

The copy button has accessibilityRole="button".
The copy button has an accessibilityLabel of "Copy code" or "Copied" depending on its state.
Content provided as strings is rendered within Text components, making it accessible to screen readers.

Listbox Button