React Codepen
===


A React component is provided that allows you to programmatically generate codepen projects from code samples on the fly.

Install

``bash
npm install @uiw/react-codepen --save
`

Usage

`jsx
import React from 'react';
import Codepen from '@uiw/react-codepen';

const code = import { Button, Divider, Icon } from 'uiw';

ReactDOM.render(

,
document.getElementById("root")
);;

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`

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.