Usage Guide
Interactive demonstration and code snippet display made simple
Choose to display your code with an interactive live preview or as a standalone code block.
Tabs Navigation
Use the tabs to navigate between the live preview of your component and the code snippet that created it.
Preview Tab
The Preview tab renders a live component to demonstrate the functionality of the code provided.
Code Tab
The Code tab presents the raw code, beautifully highlighted, ready for other developers to review or copy.
Standalone Code Block
Opt for a minimalist code block without tabs when the live preview is not needed.
Copy Functionality
A convenient copy button is included to quickly grab the code snippets for your projects.
Component Props
Understand the different props you can use with the CodePreview component and how they affect its functionality.
| Prop Name | Type | Required | Description | Default |
|---|---|---|---|---|
| code | string | Yes | The code snippet to be displayed or executed. | - |
| component | (() => JSX.Element) | JSX.Element | React.ComponentType}<any> | No | If provided, the tabs for preview and code will be shown. | - |
| lightTheme | Theme | No | Light theme for code syntax highlighting. | blackout |
| darkTheme | Theme | No | Dark theme for code syntax highlighting. | blackout |
| className | string | No | Additional CSS classNamees for the component wrapper. | - |
| style | CSSProperties | No | Inline styles for the component wrapper. | - |
| initialTab | TabsType | No | Specifies the initial active tab. | preview |