Snippet
Snippet is a component that can be used to display inline or multiline code snippets.
Storybook@nextui-org/snippetSourceStyles source
We're live on Product Hunt! Join the conversation and help us get to #1 Product of the day 🚀
Installation
npx nextui-cli@latest add snippet
The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.
Import
Usage
Sizes
Colors
Variants
Custom Symbol
Without Copy
You can hide the copy button by setting the hideCopyButton property to true.
Custom Tooltip
You can customize the tooltip by using the tooltipProps property.
Note: For more information about the
Tooltipprops, please visit the Tooltip page.
Multiline
Custom Icons
You can customize the copy and copied icons by using the copyIcon and checkIcon properties.
Slots
- base: The base slot of the snippet, it is the main container.
- content: This is the wrapper of the
<pre/>slot. - pre: The
<pre/>slot of the snippet. It is used to wrap the code. - symbol: The symbol wrapper slot.
- copyButton: The copy button slot.
- copyIcon: The copy icon slot.
- checkIcon: The check icon slot.
API
Snippet Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | ReactNode | ReactNode[] | The content of the snippet. | - |
| size | sm | md | lg | The size of the snippet. | md |
| radius | none | sm | md | lg | The radius of the snippet. | lg |
| symbol | string | ReactNode | The symbol to show before the snippet. | $ |
| timeout | number | The time in milliseconds to wait before resetting the clipboard. | 2000 |
| codeString | string | The code string to copy. if codeString is passed, it will be copied instead of the children. | - |
| tooltipProps | TooltipProps | The props of the tooltip. | - |
| copyIcon | ReactNode | The copy icon. | - |
| checkIcon | ReactNode | The check icon. | - |
| disableTooltip | boolean | Whether to disable the tooltip. | false |
| disableCopy | boolean | Whether to disable the copy button. | false |
| hideCopyButton | boolean | Whether to hide the copy button. | false |
| hideSymbol | boolean | Whether to hide the symbol. | false |
| copyButtonProps | ButtonProps | The props of the copy button. | - |
| disableAnimation | boolean | Whether to disable the animations. | false |
| classNames | Record<"base"｜"content"｜"pre"｜"symbol"｜"copyButton"｜"checkIcon", string> | Allows to set custom class names for the snippet slots. | - |
Snippet Events
| Attribute | Type | Description |
|---|---|---|
| onCopy | (value: string ｜ string[]) => void; | Handler that is called when the code is copied. |
