Install

npm install @uiw/react-codepen --save

Usage

importReactfrom'react';importCodepenfrom'@uiw/react-codepen';constcode=`import { Button, Divider, Icon } from 'uiw';ReactDOM.render(  <div>    <Button type="primary">主要按钮</Button>    <Button type="success">成功按钮</Button>    <Button type="warning">警告按钮</Button>    <Button type="danger">错误按钮</Button>    <Button type="light">亮按钮</Button>    <Button type="dark">暗按钮</Button>  </div>,  document.getElementById("root"));`;constExample=()=>{return(<Codepentitle="uiw v4.7.2 - demo"html={`<div></div>`}css_external="https://unpkg.com/uiw@4.7.2/dist/uiw.min.css"js={code}js_external="https://unpkg.com/react@16.x/umd/react.development.js;https://unpkg.com/react-dom@16.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/uiw@4.7.2/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.0.2/index.js">      Basic Example Open in Codepen</Codepen>)}

Props

typeCodePenOption={title?:string;html?:string;js?:string;css?:string;editors?:string;css_external?:string;js_external?:string;js_pre_processor?:string;}typeCodepenProps=CodePenOption&React.FormHTMLAttributes<HTMLFormElement>;

Development

# Step 1, run first, listen to the component compile and output the .js file# listen for compilation output type .d.ts filenpm run watch# Step 2, development mode, listen to compile preview website instancenpm run start

npm run build

Related

Contributors

License