react-code-view
Version:
Code view for React
53 lines (52 loc) • 2.16 kB
TypeScript
/// <reference types="react" />
import { Options } from 'sucrase';
interface EditorProps {
/** The className of the editor */
className?: string;
/** Add a prefix to the className of the buttons on the toolbar */
classPrefix?: string;
/** The className of the code button displayed on the toolbar */
buttonClassName?: string;
/** Customize the code icon on the toolbar */
icon?: React.ReactNode;
/** The properties of the show code button */
showCodeButtonProps?: React.HTMLAttributes<HTMLButtonElement>;
}
export interface RendererProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
/** Code editor theme, applied to CodeMirror */
theme?: 'light' | 'dark';
/** The code to be rendered is executed */
code?: string;
/** The component used to render the copy button */
copyButtonAs?: React.ElementType;
/** The properties of the copy button */
copyButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> & {
[key: `data-${string}`]: string;
};
/** Dependent objects required by the executed code */
dependencies?: Record<string, unknown>;
/** Renders a code editor that can modify the source code */
editable?: boolean;
/** Editor properties */
editor?: EditorProps;
/**
* https://github.com/alangpierce/sucrase#transforms
*/
transformOptions?: Options;
/** Customize the rendering toolbar */
renderToolbar?: (buttons: React.ReactNode, showCodeButtonProps: React.HTMLAttributes<HTMLButtonElement>) => React.ReactNode;
/** Customize the rendering footer */
renderExtraFooter?: () => React.ReactNode;
/** Callback triggered when the editor is opened */
onOpenEditor?: () => void;
/** Callback triggered when the editor is closed */
onCloseEditor?: () => void;
/** Callback triggered after code change */
onChange?: (code?: string) => void;
/** Executed before compiling the code */
beforeCompile?: (code: string) => string;
/** Executed after compiling the code */
afterCompile?: (code: string) => string;
}
declare const Renderer: any;
export default Renderer;