Readable, copyable code with line numbers and wrapping.
import { CodeBlock } from '@vrum/ui';
<CodeBlock
code={"import { Button } from '@vrum/ui';\n\n<Button variant=\"outline\">Save changes</Button>"}
language={"tsx"}
filename={"Actions.tsx"}
showLineNumbers={true}
showCopy={true}
showWrapToggle={true}
wrap={false}
maxHeight={300}
size={"md"}
/>| Prop | Type | Default | Description |
|---|---|---|---|
code* | string | none | code configuration. |
language | string | "text" | language configuration. |
filename | string | none | filename configuration. |
showLineNumbers | boolean | true | show line numbers configuration. |
showCopy | boolean | true | show copy configuration. |
showWrapToggle | boolean | true | show wrap toggle configuration. |
wrap | boolean | false | wrap configuration. |
maxHeight | string | number | 360 | max height configuration. |
size | "sm" | "md" | "md" | Size of the component. |
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |
import { Button } from '@vrum/ui';
<Button variant="outline">Save changes</Button>