npm install react-code-preview-layout --save

基本用法

importReactfrom"react"importCodeLayoutfrom"react-code-preview-layout"constPreview=CodeLayout.Preview;constCode=CodeLayout.Code;constToolbar=CodeLayout.Toolbar;constcode=`import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`constDemo=()=>{return(<CodeLayout><Preview><div>这里是示例展示</div></Preview><Toolbar>Code Example</Toolbar><CodetagName="pre">{code}</Code></CodeLayout>);}exportdefaultDemo;

禁用方格背景

importReactfrom"react"importCodeLayoutfrom"react-code-preview-layout"constPreview=CodeLayout.Preview;constCode=CodeLayout.Code;constToolbar=CodeLayout.Toolbar;constcode=`import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`constDemo=()=>{return(<CodeLayoutdisableCheckered><Preview><div>这里是示例展示</div></Preview><Toolbar>Code Example</Toolbar><CodetagName="pre">{code}</Code></CodeLayout>);}exportdefaultDemo;

无边框

importReactfrom"react"importCodeLayoutfrom"react-code-preview-layout"constPreview=CodeLayout.Preview;constCode=CodeLayout.Code;constToolbar=CodeLayout.Toolbar;constcode=`import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`constDemo=()=>(<CodeLayoutbordered={false}><Preview><div>示例内容</div></Preview><Toolbar>Code Example</Toolbar><CodetagName="pre">{code}</Code></CodeLayout>);exportdefaultDemo;

Preview Background Color

importReactfrom"react"importCodeLayoutfrom"react-code-preview-layout"constPreview=CodeLayout.Preview;constCode=CodeLayout.Code;constToolbar=CodeLayout.Toolbar;constcode=`import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`;constDemo=()=>(<CodeLayout><Previewstyle={{background:"#009688b0"}}><div>示例内容</div></Preview><Toolbar>Code Example</Toolbar><CodetagName="pre">{code}</Code></CodeLayout>);exportdefaultDemo;

Custom Action Button

importReactfrom"react"importCodeLayoutfrom"react-code-preview-layout"constPreview=CodeLayout.Preview;constCode=CodeLayout.Code;constToolbar=CodeLayout.Toolbar;constcode=`import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`;constDemo=()=>{return(<CodeLayout><Preview><div>示例内容</div></Preview><Toolbarextra={<div>按钮</div>}>Code Example</Toolbar><CodetagName="pre">{code}</Code></CodeLayout>);}exportdefaultDemo;

Disable Toolbar

importReact,{useState}from"react"importCodeLayoutfrom"react-code-preview-layout"constPreview=CodeLayout.Preview;constCode=CodeLayout.Code;constToolbar=CodeLayout.Toolbar;constcode=`import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`;constDemo=()=>{const[visible,setVisible]=useState(true);return(<div><buttononClick={()=>setVisible(!visible)}>{visible ?'隐藏' :'显示'}</button><CodeLayout><Preview><div>示例内容</div></Preview><Toolbarvisible={visible}collapse={!visible}>Code Example</Toolbar><CodetagName="pre">{code}</Code></CodeLayout></div>)};exportdefaultDemo;

Disable code display

importReactfrom"react"importCodeLayoutfrom"react-code-preview-layout"constPreview=CodeLayout.Preview;constCode=CodeLayout.Code;constToolbar=CodeLayout.Toolbar;constcode=`import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`;constDemo=()=>(<CodeLayout><Preview><div>示例内容</div></Preview><Toolbartext={code}visibleButton={false}>      Code Example</Toolbar></CodeLayout>);exportdefaultDemo;

添加 Codepen 按钮

importReactfrom"react"importCodeLayoutfrom"react-code-preview-layout"importCodepenfrom'@uiw/react-codepen';constPreview=CodeLayout.Preview;constCode=CodeLayout.Code;constToolbar=CodeLayout.Toolbar;constcode=`import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`;constcodePenOptions={title:`demo`,// includeModule: ['uiw'],js:`${code.replace("export default",'const APP_render =')}\nReactDOM.createRoot(document.getElementById("container")).render(<APP_render />)`,html:'<div></div>',css_external:`https://unpkg.com/uiw@4.21.2/dist/uiw.min.css`,js_external:`https://unpkg.com/react@18.x/umd/react.development.js;https://unpkg.com/react-dom@18.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/uiw@4.21.2/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.1.3/index.js`,}constextra=(<Codepen{...codePenOptions}><svgviewBox="0 0 1024 1024"width="18"height="18"><pathd="M123.428571 668l344.571429 229.714286v-205.142857L277.142857 565.142857z m-35.428571-82.285714l110.285714-73.714286-110.285714-73.714286v147.428572z m468 312l344.571429-229.714286-153.714286-102.857143-190.857143 127.428572v205.142857z m-44-281.714286l155.428571-104-155.428571-104-155.428571 104zM277.142857 458.857143l190.857143-127.428572V126.285714L123.428571 356z m548.571429 53.142857l110.285714 73.714286V438.285714z m-78.857143-53.142857l153.714286-102.857143-344.571429-229.714286v205.142857z m277.142857-102.857143v312q0 23.428571-19.428571 36.571429l-468 312q-12 7.428571-24.571429 7.428571t-24.571429-7.428571L19.428571 704.571429q-19.428571-13.142857-19.428571-36.571429V356q0-23.428571 19.428571-36.571429L487.428571 7.428571q12-7.428571 24.571429-7.428571t24.571429 7.428571l468 312q19.428571 13.142857 19.428571 36.571429z"p-id="2071"></path></svg></Codepen>);constDemo=()=>(<CodeLayout><Preview><div>示例内容</div></Preview><Toolbartext={code}visibleButton={false}extra={extra}>      Code Example</Toolbar><CodetagName="pre">{code}</Code></CodeLayout>);exportdefaultDemo;

Props

importCodeLayoutfrom"react-code-preview-layout"<CodeLayout><CodeLayout.Preview><div>示例内容</div></CodeLayout.Preview><CodeLayout.Toolbartext={code}visibleButton={false}extra={extra}>    Code Example</CodeLayout.Toolbar><CodeLayout.CodetagName="pre">{code}</CodeLayout.Code></CodeLayout>

exportinterfaceCodePreviewPropsextendsReact.HTMLAttributes<HTMLDivElement>{prefixCls?:string;/**   * Whether border is required   *@default true   */bordered?:boolean;/** disable checkered */disableCheckered?:boolean;}declaretypeCodePreviewComponent=React.FC<React.PropsWithRef<CodePreviewProps>>&{Preview:typeofPreview;Code:typeofCode;Toolbar:typeofToolbar;};

exportinterfacePreviewPropsextendsReact.HTMLAttributes<HTMLDivElement>{}exportdeclareconstPreview:React.ForwardRefExoticComponent<PreviewProps&React.RefAttributes<HTMLDivElement>>;

importReactfrom'react';exporttypeTagType=React.ComponentType|keyofJSX.IntrinsicElements;exportinterfaceCodeProps<TagextendsTagType>extendsReact.HTMLProps<Tag>{tagName?:Tag;}exportdeclareconstCode:React.ForwardRefExoticComponent<Omit<CodeProps<TagType>,"ref">&React.RefAttributes<React.HTMLProps<TagType>>>;

exportinterfaceToolbarPropsextendsReact.HTMLAttributes<HTMLDivElement>{extra?:React.ReactNode;/**   * Display cope button   *@default true   */copied?:boolean;/**   * Collapse code display?   *@default true   */collapse?:boolean;/**   * Display Toolbar?   *@default true   */visible?:boolean;/**   * Show button or not   *@default true   */visibleButton?:boolean;/** Code to be copied */text?:string;}exportdeclareconstToolbar:React.ForwardRefExoticComponent<ToolbarProps&React.RefAttributes<HTMLDivElement>>;

开发

npm install# Install dependenciesnpm run watchnpm run start

贡献者

License