Code
The Code component is used to display blocks of pre-formatted text, typically code snippets. It provides a monospaced font, an optional header with a title, and copy-to-clipboard functionality.
Installation
$ cbui-cli install @crossbuildui/codeTo 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.Import
index.tsx
1import { Code } from '@/crossbuildui/code';
2// Required for copy functionality:
3// import * as Clipboard from 'expo-clipboard';
4// For default copy icon (or custom icons):
5// import Icon from 'react-native-vector-icons/MaterialIcons';The Code component relies on
expo-clipboard for its copy-to-clipboard functionality and react-native-vector-icons/MaterialIcons for the default copy icon. Ensure these are installed and configured in your project.Basic Usage
Pass a string as children to display it as a code block.
index.tsx
1<Code>
2 const greeting = "Hello, World!";
3 console.log(greeting);
4</Code>Header and Title
Enable the header using showHeader and provide an optional title. The header includes a copy button.
index.tsx
1<Code showHeader title="JavaScript Example">
2 function factorial(n) {
3 if (n === 0) {
4 return 1;
5 }
6 return n * factorial(n - 1);
7 }
8</Code>Sizes
Adjust the text size, padding, and icon size using the size prop: 'sm', 'md' (default), or 'lg'.
index.tsx
1<Code size="sm" showHeader title="Small Code">
2 {'const small = true;'}
3</Code>
4
5<Code size="md" showHeader title="Medium Code (Default)">
6 {'const medium = "default";'}
7</Code>
8
9<Code size="lg" showHeader title="Large Code">
10 {'const large = 123;'}
11</Code>Radius
Control the border radius of the code block container with the radius prop.
index.tsx
1<Code radius="none" showHeader title="No Radius">
2 {'border-radius: 0;'}
3</Code>
4
5<Code radius="sm" showHeader title="Small Radius">
6 {'border-radius: 4px;'}
7</Code>
8
9<Code radius="lg" showHeader title="Large Radius">
10 {'border-radius: 12px;'}
11</Code>Copy Functionality
When showHeader is true, a copy button is displayed. You can provide custom text to be copied via copyText (otherwise, string children are copied). A custom copyIcon can be supplied, and an onCopy callback is fired upon successful copy.
index.tsx
1// Using a custom icon (example with MaterialCommunityIcons)
2// const CustomCopyIcon = <Icon name="content-duplicate" size={16} color="#d9d9da" />;
3
4<Code
5 showHeader
6 title="Custom Copy Icon"
7 // copyIcon={CustomCopyIcon}
8 copyText={"console.warn('Custom text copied!');"}
9 onCopy={(text) => alert("Copied: " + text)}
10>
11 {'// This text will be displayed, but copyText will be copied.
12console.log("Original text");'}
13</Code>Theming and Colors
The Code component aims for a consistent, terminal-like appearance. Its primary background, foreground, border, and header colors are fixed based on the current theme mode (light/dark) and are not affected by the color prop.
- In light mode, the code background is white, and text is black.
- In dark mode, the code background is black, and text is white.
- The main border, header background, and header foreground (title, copy icon) use fixed shades derived from the application's dark theme configuration to ensure a consistent look across modes.
The
color prop on the Code component currently has no significant visual effect on the main background, text, or header colors due to this standardized theming approach.Props Overview
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
children | ReactNode | - | The code string or ReactNode to display. String children are used for copying by default. |
size | 'sm' | 'md' | 'lg' | 'md' | Size of text, padding, and icons. |
color | CodeColor | 'default' | Largely overridden by fixed theming. |
radius | CodeRadius | 'md' | Border radius of the container. |
showHeader | boolean | false | Show header with title and copy button. |
title | string | "Code" | Title in header if showHeader is true. |
copyIcon | ReactElement | - | Custom copy icon element. |
onCopy | (text: string) => void | - | Callback after successful copy. |
styles | CodeSlotsStyles | - | Custom styles for component slots (base, header, title, copyButton, content for text). |
style | StyleProp<ViewStyle> | - | Style for the main wrapper View. Overrides styles.base. |
textStyle | StyleProp<TextStyle> | - | Style for the code text. Merged after styles.content. |
copyText | string | - | Explicit text to copy. Overrides string children for copy action. |
Styling
Customize the appearance using:
style: Applied to the outermost wrapperViewof the component.styles(slot styles): An object to style specific internal parts:base: Styles the main wrapper, merged with default wrapper styles.header: Styles the header container.title: Styles the title text in the header.copyButton: Styles thePressablearea for the copy icon.content: Styles applied to the codeTextcomponent itself.
textStyle: Additional styles applied directly to the codeText, merged afterstyles.content.
index.tsx
1<Code
2 style={{ marginVertical: 10, opacity: 0.9 }} // Styles the outermost wrapper
3 styles={{
4 base: { borderColor: 'green', borderWidth: 2 }, // Overrides default border, applied to wrapper
5 header: { backgroundColor: '#333' },
6 title: { color: 'lightgreen', fontStyle: 'italic' },
7 copyButton: { padding: 8, borderRadius: 5, backgroundColor: 'rgba(255,255,255,0.1)' },
8 // 'content' slot styles the text itself
9 content: { color: 'cyan', lineHeight: 20 }
10 }}
11 textStyle={{ fontWeight: 'bold' }} // Additional direct style for the text, merged after styles.content
12 showHeader
13 title="Styled Code Block"
14>
15 const styledCode = true;
16 if (styledCode) {
17 // Apply custom styles
18 }
19</Code>Accessibility
The Code component aims to be accessible:
- The code content, if provided as a string, is rendered within a
Textcomponent and is readable by screen readers. - The copy button in the header is a
Pressable. While it uses icons, ensure that if you provide a customcopyIconthat is not inherently descriptive, you might need to consider adding accessibility labels if the context requires it (though typically the visual context of a copy icon next to code is clear). The default icons are standard UI elements. - The "copied" state provides visual feedback with a checkmark icon.