@uiw/react-codepen NPM

React Codepen

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

Install

npm install @uiw/react-codepen --save

Usage

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

const code = `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")
);`;

const Example = () => {
  return (
    <Codepen
      title="uiw v4.7.2 - demo"
      html={`<div id="root"></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

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<HTMLFormElement>;

Development

Runs the project in development mode.

# 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.