展示 代码 与 代码在线预览示例 布局的一个 react 组件。配合 markdown-react-code-preview-loader Webpack Loader 可很好的用于文档中的 react 示例展示。
npm install react-code-preview-layout --saveimport React from "react" import CodeLayout from "react-code-preview-layout" const Preview = CodeLayout.Preview; const Code = CodeLayout.Code; const Toolbar = CodeLayout.Toolbar; const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n return<div><Button>按钮</Button></div>\n};\nexport default Demo;` const Demo = () => { return ( <CodeLayout> <Preview> <div>这里是示例展示</div> </Preview> <Toolbar>Code Example</Toolbar> <Code tagName="pre"> {code} </Code> </CodeLayout> ); } export default Demo;import React from "react" import CodeLayout from "react-code-preview-layout" const Preview = CodeLayout.Preview; const Code = CodeLayout.Code; const Toolbar = CodeLayout.Toolbar; const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n return<div><Button>按钮</Button></div>\n};\nexport default Demo;` const Demo = () => { return ( <CodeLayout disableCheckered> <Preview> <div>这里是示例展示</div> </Preview> <Toolbar>Code Example</Toolbar> <Code tagName="pre"> {code} </Code> </CodeLayout> ); } export default Demo;import React from "react" import CodeLayout from "react-code-preview-layout" const Preview = CodeLayout.Preview; const Code = CodeLayout.Code; const Toolbar = CodeLayout.Toolbar; const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n return<div><Button>按钮</Button></div>\n};\nexport default Demo;` const Demo = () => ( <CodeLayout bordered={false}> <Preview> <div>示例内容</div> </Preview> <Toolbar>Code Example</Toolbar> <Code tagName="pre"> {code} </Code> </CodeLayout> ); export default Demo;import React from "react" import CodeLayout from "react-code-preview-layout" const Preview = CodeLayout.Preview; const Code = CodeLayout.Code; const Toolbar = CodeLayout.Toolbar; const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n return<div><Button>按钮</Button></div>\n};\nexport default Demo;`; const Demo = () => ( <CodeLayout> <Preview style={{ background: "#009688b0" }}> <div>示例内容</div> </Preview> <Toolbar>Code Example</Toolbar> <Code tagName="pre"> {code} </Code> </CodeLayout> ); export default Demo;import React from "react" import CodeLayout from "react-code-preview-layout" const Preview = CodeLayout.Preview; const Code = CodeLayout.Code; const Toolbar = CodeLayout.Toolbar; const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n return<div><Button>按钮</Button></div>\n};\nexport default Demo;`; const Demo = () => { return ( <CodeLayout> <Preview> <div>示例内容</div> </Preview> <Toolbar extra={<div>按钮</div>}>Code Example</Toolbar> <Code tagName="pre"> {code} </Code> </CodeLayout> ); } export default Demo;import React, { useState } from "react" import CodeLayout from "react-code-preview-layout" const Preview = CodeLayout.Preview; const Code = CodeLayout.Code; const Toolbar = CodeLayout.Toolbar; const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n return<div><Button>按钮</Button></div>\n};\nexport default Demo;`; const Demo = ()=> { const [visible, setVisible] = useState(true); return ( <div> <button onClick={() => setVisible(!visible)}> {visible ? '隐藏' : '显示'} </button> <CodeLayout> <Preview> <div>示例内容</div> </Preview> <Toolbar visible={visible} collapse={!visible}>Code Example</Toolbar> <Code tagName="pre"> {code} </Code> </CodeLayout> </div> ) }; export default Demo;import React from "react" import CodeLayout from "react-code-preview-layout" const Preview = CodeLayout.Preview; const Code = CodeLayout.Code; const Toolbar = CodeLayout.Toolbar; const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n return<div><Button>按钮</Button></div>\n};\nexport default Demo;`; const Demo = ()=> ( <CodeLayout> <Preview> <div>示例内容</div> </Preview> <Toolbar text={code} visibleButton={false}> Code Example </Toolbar> </CodeLayout> ); export default Demo;可以使用 @uiw/react-codepen 和 @uiw/react-codesandbox 组件添加代码预览按钮，他们用于动态地将代码示例生成 codepen 项目和 codesandbox 项目。
import React from "react" import CodeLayout from "react-code-preview-layout" import Codepen from '@uiw/react-codepen'; const Preview = CodeLayout.Preview; const Code = CodeLayout.Code; const Toolbar = CodeLayout.Toolbar; const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n return<div><Button>按钮</Button></div>\n};\nexport default Demo;`; const codePenOptions = { title: `demo`, // includeModule: ['uiw'], js: `${code.replace("export default", 'const APP_render =')}\nReactDOM.createRoot(document.getElementById("container")).render(<APP_render />)`, html: '<div id="container" style="padding: 24px"></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`, } const extra = ( <Codepen {...codePenOptions}> <svg viewBox="0 0 1024 1024" width="18" height="18"> <path d="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> ); const Demo = () => ( <CodeLayout> <Preview> <div>示例内容</div> </Preview> <Toolbar text={code} visibleButton={false} extra={extra}> Code Example </Toolbar> <Code tagName="pre">{code}</Code> </CodeLayout> ); export default Demo;import CodeLayout from "react-code-preview-layout" <CodeLayout> <CodeLayout.Preview> <div>示例内容</div> </CodeLayout.Preview> <CodeLayout.Toolbar text={code} visibleButton={false} extra={extra}> Code Example </CodeLayout.Toolbar> <CodeLayout.Code tagName="pre">{code}</CodeLayout.Code> </CodeLayout>export interface CodePreviewProps extends React.HTMLAttributes<HTMLDivElement> { prefixCls?: string; /** * Whether border is required * @default true */ bordered?: boolean; /** disable checkered */ disableCheckered?: boolean; } declare type CodePreviewComponent = React.FC<React.PropsWithRef<CodePreviewProps>> & { Preview: typeof Preview; Code: typeof Code; Toolbar: typeof Toolbar; };<CodeLayout.Preview>
export interface PreviewProps extends React.HTMLAttributes<HTMLDivElement> {} export declare const Preview: React.ForwardRefExoticComponent<PreviewProps & React.RefAttributes<HTMLDivElement>>;<CodeLayout.Code>
import React from 'react'; export type TagType = React.ComponentType | keyof JSX.IntrinsicElements; export interface CodeProps<Tag extends TagType> extends React.HTMLProps<Tag> { tagName?: Tag; } export declare const Code: React.ForwardRefExoticComponent<Omit<CodeProps<TagType>, "ref"> & React.RefAttributes<React.HTMLProps<TagType>>>;<CodeLayout.Toolbar>
export interface ToolbarProps extends React.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; } export declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;npm install # Install dependencies npm run watch npm run start一如既往，感谢我们出色的贡献者！
由 action-contributors 生成。
Licensed under the MIT License.