Skip to content
Code edit preview for React.
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Latest commit b53c5c6 Aug 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public chore: Update favicon.ico Aug 6, 2019
src chore: Rename componentWillReceiveProps to UNSAFE_componentWillReceiv… Aug 15, 2019
test Init project. Aug 4, 2019
website Update website font family. Aug 12, 2019
.babelrc Init project. Aug 4, 2019
.gitignore chore: Add dist to .gitignore Aug 5, 2019
.kktrc.js chore: Update .kktrc.js Aug 5, 2019
README.md
package-lock.json released v1.4.2 Aug 15, 2019
package.json released v1.4.2 Aug 15, 2019

README.md

React Code Preview

Code edit preview for React. Preview Demo: https://uiwjs.github.io/react-code-preview

There are often a lot of sample code in the documentation. We hope that you can run the sample code to view the rendering interface as you read the document.

Install

npm install @uiw/react-code-preview --save

Usage

import React from 'react';
import { Button } from 'uiw';
import CodePreview from '@uiw/react-code-preview';

const code = `import { Button, Divider, Icon } from 'uiw';
ReactDOM.render(
  <div>
    <Button type="primary">主要按钮</Button>
    <Button type="success">成功按钮</Button>
  </div>,
  _mount_
);
`;

class Demo extends React.Component {
  render() {
    return (
      <CodePreview
        code={code}
        dependencies={{ Button }}
      />
    );
  }
}
  • _mount_ Special strings, the compilation will be replaced.

Props

export interface ICodePreviewProps extends ISplitProps {
  prefixCls?: string;
  style?: React.CSSProperties;
  /**
   * To specify a CSS class, use the className attribute.
   */
  className?: string;
  /**
   * Whether to display the border.
   */
  bordered?: boolean;
  /**
   * `JSX` source code
   */
  code?: string;
  /**
   * Whether to display the code interface.
   */
  noCode?: boolean;
  /**
   * Is the background white or plaid?
   */
  bgWhite?: boolean;
  /**
   * Whether to display the preview interface.
   */
  noPreview?: boolean;
  /**
   * Preview area does not display scroll bars
   */
  noScroll?: boolean;
  /**
   * Dependent component
   */
  dependencies?: { [key: string]: any };
  codePenOption?: ICodePenOption;
}
interface ICodePenOption {
  title?: string;
  html?: string;
  js?: string;
  css?: string;
  editors?: string;
  css_external?: string;
  js_external?: string;
  js_pre_processor?: string;
}

Development

The components are placed in the src directory.

npm run watch # Listen compile .tsx files.
npm run build # compile .tsx files.

npm run doc

License

Licensed under the MIT License.

You can’t perform that action at this time.