react code preview

Reactコードプレビュー

Reactのコード編集プレビュー。プレビューデモ：https：//uiwjs.github.io/react-code-preview

多くの場合、ドキュメントには多くのサンプルコードがあります。ドキュメントを読むときに、サンプルコードを実行してレンダリングインターフェイスを表示できることを願っています。

インストール

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

使用法

反応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 } } /> ;
}

反応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_特別文字列、コンピレーションが交換されます。

小道具

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

発達

コンポーネントはsrcディレクトリに配置されます。

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のWebブラウザー。
• @uiw/React-codemirror：ReactのCodemirrorコンポーネント。 @codemirror
• @uiw/React-Monacoeditor：ReactのMonaco Editorコンポーネント。
• @uiw/React-markdown-editor：React.jsおよびTypeScriptで実装されたプレビューを備えたマークダウンエディター。
• @uiw/racem-md-editor：React.jsおよびTypescriptで実装されたプレビューを備えたシンプルなマークダウンエディター。

貢献者

いつものように、私たちの素晴らしい貢献者に感謝します！

Github-action-contributorsで作られています。

ライセンス

MITライセンスに基づいてライセンスされています。