1.6.4 • Published 2 years ago

@docchi/yamde v1.6.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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:

IdentifierDescription
boldBold text.
italicItalic text.
strikethroughStrikethrough text
heading1Heading 1 (H1)
heading2Heading 2 (H2)
heading3Heading 3 (H3)
ulistUnordered list
olistOrdered list
tableTable markdown
imageImage markdown
quoteBlockquote markdown
codeCode highlight
hrHorizontal rule
spoilerHide message