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 | ~~Strikethrough~~ text | | 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 />