# @uiw/react-code-preview

> Code edit preview for React.

Latest version **5.2.2** (published 2024-03-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @uiw/react-code-preview
pnpm add @uiw/react-code-preview
yarn add @uiw/react-code-preview
bun add @uiw/react-code-preview
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 5.2.2 |
| Published | 2024-03-28 |
| First published | 2019-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 112.4 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 69 |
| Author | Kenny Wang |
| Maintainers | uiwjs, wcjiang |
| Keywords | uiw, uiwjs, code, code-preview, react-code-preview |

## Links

- npm: https://www.npmjs.com/package/@uiw/react-code-preview
- Repository: https://github.com/uiwjs/react-code-preview
- Homepage: https://uiwjs.github.io/react-code-preview
- Issues: https://github.com/uiwjs/react-code-preview/issues
- npm.io page: https://npm.io/package/@uiw/react-code-preview

## Dependencies (11)

- [@babel/core](https://npm.io/package/@babel/core.md) ~7.24.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ~7.24.0
- [@uiw/react-split](https://npm.io/package/@uiw/react-split.md) ~5.9.0
- [@babel/standalone](https://npm.io/package/@babel/standalone.md) ~7.24.0
- [@uiw/react-codepen](https://npm.io/package/@uiw/react-codepen.md) ~1.0.2
- [@uiw/react-codemirror](https://npm.io/package/@uiw/react-codemirror.md) ~4.21.0
- [@uiw/copy-to-clipboard](https://npm.io/package/@uiw/copy-to-clipboard.md) ~1.0.12
- [@uiw/react-codesandbox](https://npm.io/package/@uiw/react-codesandbox.md) ~1.1.4
- [@codemirror/lang-javascript](https://npm.io/package/@codemirror/lang-javascript.md) ^6.0.0
- [@babel/plugin-transform-classes](https://npm.io/package/@babel/plugin-transform-classes.md) ~7.24.0
- [babel-plugin-transform-remove-imports](https://npm.io/package/babel-plugin-transform-remove-imports.md) ~1.7.0

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 5.2.2 (latest) — 2024-03-28
- 5.2.1 — 2024-03-25
- 5.2.0 — 2024-03-25
- 5.1.2 — 2022-04-23
- 5.1.1 — 2022-04-22
- 5.1.0 — 2022-04-22
- 5.0.0 — 2022-04-22
- 4.0.6 — 2022-03-06
- 4.0.5 — 2022-01-18
- 4.0.4 — 2022-01-18
- 4.0.3 — 2022-01-17
- 4.0.2 — 2022-01-17
- 4.0.1 — 2022-01-17
- 4.0.0 — 2022-01-16
- 3.0.1 — 2022-01-11
- … 50 more at https://npm.io/package/@uiw/react-code-preview/versions

## README

## React Code Preview

<!--dividing-->

[![Build & Deploy](https://github.com/uiwjs/react-code-preview/workflows/Build%20&%20Deploy/badge.svg)](https://github.com/uiwjs/react-code-preview/actions)
[![Release](https://img.shields.io/github/release/uiwjs/react-code-preview)](https://github.com/uiwjs/react-code-preview/releases)
[![npm version](https://img.shields.io/npm/v/@uiw/react-code-preview.svg)](https://www.npmjs.com/package/@uiw/react-code-preview)
[![Gitee](https://jaywcjlove.github.io/sb/ico/gitee.svg)](https://uiw.gitee.io/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

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

## Usage

### In React 18

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/uiw-react-code-preview-react-18-1bmhhd?fontsize=14&hidenavigation=1&theme=dark)

```jsx
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

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/uiw-react-code-preview-react-17-t6ro9?fontsize=14&hidenavigation=1&theme=dark)

```jsx
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

```typescript
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';
}
```

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

```typescript
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`](./src) directory.

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

npm run doc
```

### Related

- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser.
- [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror): CodeMirror component for React. @codemirror
- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React.
- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript.

## Contributors

As always, thanks to our amazing contributors!

<a href="https://github.com/uiwjs/react-code-preview/graphs/contributors">
  <img src="https://uiwjs.github.io/react-code-preview/CONTRIBUTORS.svg" />
</a>

Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).

### License

Licensed under the MIT License.

---
_Source: https://npm.io/package/@uiw/react-code-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._