react-vditor

react-vditor

English | 简体中文

Vditor Components for React!

About Vditor, see Vanessa219/vditor

Usage

• Add dependencies

npm install vditor react-vditor
# or
yarn add vditor react-vditor
# or
pnpm install vditor react-vditor

• Import component

import React, { FC, useState, useEffect } from "react"
import Vditor from "vditor"
import { VditorEditor } from "react-vditor"

const TestVditorEditor: FC = () => {
    const [vditor, setVditor] = useState<Vditor>()
    useEffect(() => {
        if (!!vditor) {
            console.log(`Update Default Vditor:`)
            console.log(vditor)
        }
    }, [vditor])
    return <VditorEditor keyID="base-editor" bindVditor={setVditor} />
}

export default TestVditorEditor

see demo 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
<VditorEditor />	Basic Vditor editor
<VditorIREditor />	Vditor IR editor (Syntax Sugar)
<VditorSVEditor />	Vditor SV editor (Syntax Sugar)
<VditorWYSIWYGEditor />	Vditor WYSIWYG editor (Syntax Sugar)
<VditorPreview />	Vditor markdown preview component

Props of Vditor Components

props	type	required	description
keyID	string	√	ID of editor
options	IOptions	×	Vditor options
bindVditor	(vditor: Vditor): void	×	Bind Vditor instance to state

• Props of VditorPreview

props	type	required	description
markdown	string	√	markdown content
options	IPreviewOptions	×	Vditor preview options
customClass	string	×	custom preview component class

Development

• The project packages are managed by pnpm

npm install -g pnpm

pnpm install

# for dev
pnpm dev

# for build
pnpm build

• Preivew Changes

cd __test__

pnpm install

pnpm link ..

License

MIT © Herbert He