# markdown-it-safe-jsx

> ```jsx import MarkdownIt from 'markdown-it' import { safeJsx } from 'markdown-it-safe-jsx'

Latest version **0.0.2** (published 2023-12-14) · 0 weekly downloads

## Install

```sh
npm install markdown-it-safe-jsx
pnpm add markdown-it-safe-jsx
yarn add markdown-it-safe-jsx
bun add markdown-it-safe-jsx
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-12-14 |
| First published | 2023-12-11 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | steelydylan |

## Links

- npm: https://www.npmjs.com/package/markdown-it-safe-jsx
- npm.io page: https://npm.io/package/markdown-it-safe-jsx

## Dependencies (4)

- [acorn](https://npm.io/package/acorn.md) ^8.11.2
- [acorn-jsx](https://npm.io/package/acorn-jsx.md) ^5.3.2
- [acorn-walk](https://npm.io/package/acorn-walk.md) ^8.3.1
- [acorn-jsx-walk](https://npm.io/package/acorn-jsx-walk.md) ^2.0.0

## Recent versions

- 0.0.2 (latest) — 2023-12-14
- 0.0.1 — 2023-12-13
- 0.0.0 — 2023-12-11

## README

## markdown-it-safe-jsx

```jsx
import MarkdownIt from 'markdown-it'
import { safeJsx } from 'markdown-it-safe-jsx'

import { TestComponent } from './TestComponent'

const md = new MarkdownIt()
md.use(safeJsx, {
  components: {
    TestComponent: (props) => <TestComponent {...props} />
  }
})
md.render(`<TestComponent test="test"></TestComponent>`)
```

### hydrate component

Sometimes You need to hydrate component, for example, if you want to use `useState` hook in your component.

```jsx

import MarkdownIt from 'markdown-it'
import { safeJsx, useHydrateJsx } from 'markdown-it-safe-jsx'

import { TestComponent } from './TestComponent'

function Markdown({ text }: { text: string }) {
  const ref = useRef<HTMLDivElement>(null);

  // hydrate component
  useHydrateJsx({
    components: {
      Test
    },
    ref,
  }, []);

  const result = useMemo(() => {
    const md = markdownIt({
      breaks: true,
      linkify: true,
      html: true,
    });
    md.use(safeJsx, {
      Test: (props: TestProps) => {
        return <Test {...props} />;
      }
    })
    return md.render(text);
  }, [text]);

  return (
    <div dangerouslySetInnerHTML={{ __html: result }} ref={ref}></div>
  )
}
```

### dangerously support function props

If you want to use function props, you can use `unsafeRenderFunction` and `unsafeHydrateFunction` options.

```jsx
import MarkdownIt from 'markdown-it'
import { safeJsx, useHydrateJsx } from 'markdown-it-safe-jsx'

import { TestComponent } from './TestComponent'

function Markdown({ text }: { text: string }) {
  const ref = useRef<HTMLDivElement>(null);

  // hydrate component
  useHydrateJsx({
    components: {
      Test
    },
    ref,
    unsafeHydrateFunction: true,
  }, []);

  const result = useMemo(() => {
    const md = markdownIt({
      breaks: true,
      linkify: true,
      html: true,
    });
    md.use(safeJsx, {
      Test: (props: TestProps) => {
        return <Test {...props} />;
      }
    }, {
      unsafeRenderFunction: true,
    })
    return md.render(text);
  }, [text]);

  return (
    <div dangerouslySetInnerHTML={{ __html: result }} ref={ref}></div>
  )
}
```

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