react-markdown-rtl v1.1.13

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