# vditor-react

> A React wrapper of Vditor, the next-generation Markdown editor.

Latest version **0.2.2** (published 2020-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install vditor-react
pnpm add vditor-react
yarn add vditor-react
bun add vditor-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2020-04-06 |
| First published | 2020-02-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 267.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | stevapple |
| Maintainers | stevapple |
| Keywords | markdown, react, component, vditor |

## Links

- npm: https://www.npmjs.com/package/vditor-react
- Repository: https://github.com/stevapple/vditor-react
- Homepage: https://github.com/stevapple/vditor-react#readme
- Issues: https://github.com/stevapple/vditor-react/issues
- npm.io page: https://npm.io/package/vditor-react

## Dependencies (1)

- [vditor](https://npm.io/package/vditor.md) ^3.0.11

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.2 (latest) — 2020-04-06
- 0.2.1 — 2020-04-06
- 0.2.0 — 2020-02-29
- 0.1.2 — 2020-02-28
- 0.1.1 — 2020-02-28
- 0.1.0 — 2020-02-28

## README

<a title="MIT" target="_blank" href="https://opensource.org/licenses/MIT"><img src="http://img.shields.io/npm/l/vditor-react"></a>
<a title="vditor-react" target="_blank" href="https://www.npmjs.com/package/vditor-react"><img src="http://img.shields.io/npm/v/vditor-react"></a>

English version | [简体中文](README-zh_CN.md)

# Vditor for React

[Vditor](https://github.com/Vanessa219/vditor) is the next-generation Markdown editor open-sourced by [B3log](https://b3log.org). This project is the [React](https://reactjs.org) wrapper of it. 

## Installation

<!-- ### By NPM -->

```bash
npm install vditor-react --save
```

## Usage

```jsx
import ReactDOM from 'react-dom'
import Vditor from 'react-vditor'

ReactDOM.render(
	<Vditor height={700} />, 
	document.getElementById('node')
);
```

Then include the specific `div` tag in the HTML file: 

```html
<div id="node" />
```

## API

`vditor-react` maps most of its `props` into `options` of the original Vditor APIs, which you can access [here](https://hacpai.com/article/1549638745630) (Chinese version only). 

`vditor-react` also provides some `props` to improve the React practice, which are as follow:

| Name     | Definition                              | Default  | Description                                                                                                                                    | Deprecated Vditor API |
|----------|-----------------------------------------|----------|------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|
| onInit   | (text: String) => {}                    | () => {} | Called after the editor UI has been loaded, with the initial text.                                                                             | options.after         |
| onSelect | (selection: String, text: String) => {} | () => {} | Called when the text selection is updated, with the selected text and the full text.                                                           | options.select        |
| onInput  | (text: String) => {}                    | () => {} | Called shortly after text inputs, with the full text. It won’t be called during an IME composition.                                            | options.input         |
| darkMode | Boolean                                 | false    | Whether the editor UI is in dark mode.                                                                                                         | options.theme         |
| disabled | Boolean                                 | false    | Whether to disable the editor.                                                                                                                 | disabled() enable()   |

You can also extend this component and access the Vditor instance as `this.editor`. 

## Example

There is a demo under `demo/` with full functionalities of `vditor-react`, and it also implements system-wide (browser-wide) Dark Mode support and an 'Enable/Disable' switch with React Hooks. 

You can start the demo by the following command: 

```bash
npm run dev
```

Then open the browser and check it out in `http://127.0.0.1:8081`.

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