A React component is provided that allows you to programmatically generate codepen projects from code samples on the fly.
npm install @uiw/react-codepenReact Codepen
===



A React component is provided that allows you to programmatically generate codepen projects from code samples on the fly.
``bash`
npm install @uiw/react-codepen --save
`jsx
import React from 'react';
import Codepen from '@uiw/react-codepen';
const code = import { Button, Divider, Icon } from 'uiw';
ReactDOM.render(
;const Example = () => {
return (
title="uiw v4.7.2 - demo"
html={
}
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
)
}
`Props
`typescript
type CodePenOption = {
title?: string;
html?: string;
js?: string;
css?: string;
editors?: string;
css_external?: string;
js_external?: string;
js_pre_processor?: string;
}type CodepenProps = CodePenOption & React.FormHTMLAttributes;
`Development
Runs the project in development mode.
`bash
Step 1, run first, listen to the component compile and output the .js file
listen for compilation output type .d.ts file
npm run watch
Step 2, development mode, listen to compile preview website instance
npm run start
`production
Builds the app for production to the build folder.
`bash
npm run build
`The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
$3
@uiw/react-stackblitz
- @uiw/react-codesandbox`As always, thanks to our amazing contributors!
Made with github-action-contributors.
Licensed under the MIT License.