# react-markdown-rtl

> Markdown editor and parser components for React. Supports right-to-left.

Latest version **1.1.13** (published 2024-04-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-markdown-rtl
pnpm add react-markdown-rtl
yarn add react-markdown-rtl
bun add react-markdown-rtl
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.13 |
| Published | 2024-04-14 |
| First published | 2023-10-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 59.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Oren Sayag |
| Maintainers | oren-sayag |
| Keywords | markdown, react, editor, rtl |

## Links

- npm: https://www.npmjs.com/package/react-markdown-rtl
- Homepage: https://github.com/OrenSayag/react-markdown-rtl
- npm.io page: https://npm.io/package/react-markdown-rtl

## Dependencies (3)

- [react](https://npm.io/package/react.md) >=18
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.2

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.1.13 (latest) — 2024-04-14
- 1.1.12 — 2024-04-10
- 1.1.11 — 2024-03-26
- 1.1.1 — 2024-03-14
- 1.1.0 — 2024-03-14
- 1.0.12 — 2023-11-03
- 1.0.11 — 2023-10-28
- 1.0.1 — 2023-10-28
- 1.0.0 — 2023-10-28

## README

# 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

---
_Source: https://npm.io/package/react-markdown-rtl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._