@stianlarsen/react-code-preview
Version:
A React component that provides tabbed navigation for viewing a live component preview and its source code separately.
35 lines (31 loc) • 1.09 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { CSSProperties } from 'react';
import { BundledTheme } from 'shiki';
type Themes = BundledTheme | "blackout";
type TabsType = "preview" | "code";
interface PreviewOnlyCodeProps {
code: string;
lightTheme?: Themes;
darkTheme?: Themes;
className?: string;
style?: CSSProperties;
onCopied?: () => void;
}
interface CodeAndPreviewProps {
component: (() => JSX.Element) | JSX.Element | React.ComponentType<any>;
code: string;
lightTheme?: Themes;
darkTheme?: Themes;
className?: string;
style?: CSSProperties;
initialTab?: TabsType;
onCopied?: () => void;
}
type CodePreviewProps = PreviewOnlyCodeProps | CodeAndPreviewProps;
interface UseHighlightCode {
highlightedCode: string;
codeString: string;
loadingCode: boolean;
}
declare const CodePreview: (props: CodePreviewProps) => react_jsx_runtime.JSX.Element;
export { type CodeAndPreviewProps, CodePreview, type CodePreviewProps, type PreviewOnlyCodeProps, type TabsType, type Themes, type UseHighlightCode };