Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/herberthe/react-vditor
Vditor Components for React!
https://github.com/herberthe/react-vditor
lute markdown markdown-editor react reactjs vditor
Last synced: 3 months ago
JSON representation
Vditor Components for React!
- Host: GitHub
- URL: https://github.com/herberthe/react-vditor
- Owner: HerbertHe
- License: mit
- Created: 2021-07-27T15:01:40.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-08-29T16:23:07.000Z (over 3 years ago)
- Last Synced: 2024-10-09T17:04:05.779Z (3 months ago)
- Topics: lute, markdown, markdown-editor, react, reactjs, vditor
- Language: TypeScript
- Homepage: https://goer.icu/react-vditor/
- Size: 453 KB
- Stars: 9
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-vditor
[](https://www.npmjs.com/package/react-vditor)
[](https://www.npmjs.com/package/react-vditor)
[](https://cnpmjs.org/package/react-vditor)
[](https://cnpmjs.org/package/react-vditor)
[](https://app.fossa.com/projects/git%2Bgithub.com%2FHerbertHe%2Freact-vditor?ref=badge_shield)
[English](./README.md) | [简体中文](./README.zh_CN.md)
Vditor Components for React!
> About Vditor, see [Vanessa219/vditor](https://github.com/Vanessa219/vditor)
## Usage
- Add dependencies
```bash
npm install vditor react-vditor
# or
yarn add vditor react-vditor
# or
pnpm install vditor react-vditor
```
- Import component
```ts
import React, { FC, useState, useEffect } from "react"
import Vditor from "vditor"
import { VditorEditor } from "react-vditor"
const TestVditorEditor: FC = () => {
const [vditor, setVditor] = useState()
useEffect(() => {
if (!!vditor) {
console.log(`Update Default Vditor:`)
console.log(vditor)
}
}, [vditor])
return
}
export default TestVditorEditor
```
> see [demo](./__test__/) for more
## What is react-vditor?
react-vditor is a wrapper of Vditor. Due to the reason that the Vditor is independent of frameworks, and we always need to initialize the Vditor in the lifecycle! Repeated operations are always boring! Thus, react-vditor provides some components for React that cover commonly used Vditor editors, makes it easy to use in React.
What's more, the react-vditor is well compatible with Vditor and provides some custom props for better development experience.
## Vditor Components of react-vditor
| components | description |
| ------------------------- | :----------------------------------- |
| `` | Basic Vditor editor |
| `` | Vditor IR editor (Syntax Sugar) |
| `` | Vditor SV editor (Syntax Sugar) |
| `` | Vditor WYSIWYG editor (Syntax Sugar) |
| `` | Vditor markdown preview component |
## Props of Vditor Components
| props | type | required | description |
| ---------- | ------------------------------------------ | -------- | :---------------------------- |
| keyID | string | √ | ID of editor |
| options | [IOptions](./src/types/options/options.ts) | × | Vditor options |
| bindVditor | (vditor: Vditor): void | × | Bind Vditor instance to state |
- Props of VditorPreview
| props | type | required | description |
| ----------- | ------------------------------------------------- | -------- | :----------------------------- |
| markdown | string | √ | markdown content |
| options | [IPreviewOptions](./src/types/options/preview.ts) | × | Vditor preview options |
| customClass | string | × | custom preview component class |
## Development
- The project packages are managed by pnpm
```bash
npm install -g pnpm
pnpm install
# for dev
pnpm dev
# for build
pnpm build
```
- Preivew Changes
```bash
cd __test__
pnpm install
pnpm link ..
```
## License
MIT © [Herbert He](https://github.com/HerbertHe)
[](https://app.fossa.com/projects/git%2Bgithub.com%2FHerbertHe%2Freact-vditor?ref=badge_large)