JSPM – @uiw/react-code-preview@5.2.2

Package Exports

@uiw/react-code-preview
@uiw/react-code-preview/cjs/index.js
@uiw/react-code-preview/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-code-preview) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

In React 18

import Button from '@uiw/react-button';
import CodePreview from '@uiw/react-code-preview';

const code = `import Button from '@uiw/react-button';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(_mount_).render(
  <div>
    <Button type="primary">主要按钮</Button>
    <Button type="success">成功按钮</Button>
  </div>,
);`;

export default function App() {
  return <CodePreview code={code} dependencies={{ Button }} />;
}

In React 17

import Button from '@uiw/react-button';
import CodePreview from '@uiw/react-code-preview';

const code = `import Button from '@uiw/react-button';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    <Button type="primary">主要按钮</Button>
    <Button type="success">成功按钮</Button>
  </div>,
  _mount_
);`;

export default function App() {
  return <CodePreview code={code} dependencies={{ Button }} />;
}

_mount_ Special strings, the compilation will be replaced.

Props

interface CodePreviewProps extends SplitProps {
  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;
  /**
   * Only show Edit
   */
  onlyEdit?: boolean;
  /**
   * Whether to display the preview interface.
   */
  noPreview?: boolean;
  /**
   * Preview area does not display scroll bars
   */
  noScroll?: boolean;
  /**
   * Modify ReactCodemirror props.
   */
  editProps?: ReactCodeMirrorProps;
  /**
   * Dependent component
   */
  dependencies?: Record<string, any>;
  codePenOption?: CodepenProps & {
    /**
     * Packages that do not require comments.
     * @example ['uiw']
     */
    includeModule?: string[];
  };
  codeSandboxOption?: CodeSandboxProps;
  /** @default 'Code' */
  btnText?: string;
  /** @default 'Hide Editor' */
  btnHideText?: string;
  /**
   * `light` / `dark` / `Extension` Defaults to `light`.
   * @default light
   */
  theme?: ReactCodeMirrorProps['theme'];
  /**
   * Specifies the initial state of the source panel.
   */
  sourceState?: 'hidden' | 'shown';
}

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

type CodeSandboxProps = React.FormHTMLAttributes<HTMLFormElement> & {
  /**
   * Whether we should redirect to the embed instead of the editor.
   */
  embed?: boolean;
  /**
   * The query that will be used in the redirect url. `embed` must be equal to `true`, `embed=true`.
   * [CodeSandbox Embed Options](https://codesandbox.io/docs/embedding#embed-options)
   * @example `view=preview&runonclick=1`
   */
  query?: string;
  /**
   * Instead of redirecting we will send a JSON reponse with `{"sandbox_id": sandboxId}`.
   */
  json?: boolean;
  /**
   * Parameters used to define how the sandbox should be created.
   */
  files?: Record<
    string,
    {
      content?: string | Record<string, any>;
      isBinary?: boolean;
    }
  >;
};

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

@uiw/react-markdown-preview: React component preview markdown text in web browser.
@uiw/react-codemirror: CodeMirror component for React. @codemirror
@uiw/react-monacoeditor: Monaco Editor component for React.
@uiw/react-markdown-editor: A markdown editor with preview, implemented with React.js and TypeScript.
@uiw/react-md-editor: A simple markdown editor with preview, implemented with React.js and TypeScript.

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.

@uiw/react-code-preview