@docchi/yamde
TypeScript icon, indicating that this package has built-in type declarations

1.6.4 • Public • Published

YAMDE

yamde_logo_light

Y.A.M.D.E - yet another markdown editor.

Demo:

View YAMDE demo


🌱 Features

  • Responsive
  • Light/dark mode support
  • Customizable toolbar
  • Lightweight: Bundlephobia

🔧 Installation

npm install @docchi/yamde


💻 Usage

Example implementation:

import React, { useState } from 'react'
import Yamde from '@docchi/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" />

CleanShot 2021-04-15 at 00 26 39

Dark

<Yamde value={text} handler={setText} theme="dark" />

CleanShot 2021-04-15 at 00 28 50

⌨️ 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
spoiler Hide message

Package Sidebar

Install

npm i @docchi/yamde

Weekly Downloads

0

Version

1.6.4

License

MIT

Unpacked Size

29.4 kB

Total Files

27

Last publish

Collaborators

  • xanax_