1.7.1 • Published 3 years ago
yamde v1.7.1
YAMDE

Y.A.M.D.E - yet another markdown editor.
Demo:
🌱 Features
- Responsive
- Light/dark mode support
- Customizable toolbar
- Lightweight: Bundlephobia
🔧 Installation
npm install yamde
💻 Usage
Example implementation:
import React, { useState } from 'react'
import Yamde from 'yamde'
export const App = () => {
const [text, setText] = useState('')
return <Yamde value={text} handler={setText} theme="light" />
}⚙️ Options
🎨 Themes
There are two available theme: dark and light.
This can be controlled via the theme prop (defaults to light if non specified).
Light
<Yamde value={text} handler={setText} theme="light" />
Dark
<Yamde value={text} handler={setText} theme="dark" />
⌨️ Toolbar actions
You can customize the toolbar actions by passing in the toolbar prop (toolbar?: string[]).
Omiting this prop will default to showing all available actions.
<Yamde value={text} handler={setText} toolbar={['bold', 'italic', 'strikethrough']} />Available actions:
| Identifier | Description |
|---|---|
bold | Bold text. |
italic | Italic text. |
strikethrough | |
heading1 | Heading 1 (H1) |
heading2 | Heading 2 (H2) |
heading3 | Heading 3 (H3) |
ulist | Unordered list |
olist | Ordered list |
table | Table markdown |
image | Image markdown |
quote | Blockquote markdown |
code | Code highlight |
hr | Horizontal rule |
required prop
If you use YAMDE in a form that uses HTML form validation, you can set the required prop to true (by default this is set to false):
<Yamde value={text} handler={setText} required />