react-markdown-rtl

Markdown Components for React

Supports RTL

Right to Left direction of text

Installation

npm i react-markdown-rtl

Usage

In this example, we use tailwindcss to style the package's components, which come unstylewd and should be styled externally by the user.

import {useState} from 'react'
import {MDEditor, MDRenderer} from "react-markdown-rtl";
import Switch from "./components/ui/Switch";

function App() {
    const [content, setContent] = useState('')
    const [dir, setDir] = useState<'ltr' | 'rtl'>('rtl')
    const onSwitchDir = () => setDir(dir === 'rtl' ? 'ltr' : 'rtl')

  return (
    <>
      <div className={"w-[100vw] flex items-center flex-col gap-4"}>
          <div>
            <span>RTL</span>
            <Switch value={dir ==='rtl'} onChange={onSwitchDir} />
          </div>
          <MDEditor className={"w-[50vw] h-96 outline-none"} isRtl={dir==='rtl'} onChange={(e)=>setContent(e.target.value)} />
          <MDRenderer className={"w-[50vw] border-2 rounded-md border-white p-4 "}  dir={dir} content={content} />
      </div>
    </>
  )
}

export default App

Operators

symbol	meaning
# text	xl title
## text	l title
### text	m title
**text**	bold
*text*	italic
++text++	rtl
--text--	ltr
~~text~~	strike-through
_text_	underline
{RED}text{RED}	red color
{BLUE}text{BLUE}	blue color
{GREEN}text{GREEN}	green color
{YELLOW}text{YELLOW}	yellow color
{#somehex}text{#somehex}	dynamic hex color