https://github.com/steelydylan/markdown-it-safe-jsx
https://github.com/steelydylan/markdown-it-safe-jsx
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/steelydylan/markdown-it-safe-jsx
- Owner: steelydylan
- Created: 2023-12-11T05:55:43.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-14T08:18:43.000Z (over 2 years ago)
- Last Synced: 2025-02-09T00:02:15.059Z (over 1 year ago)
- Language: TypeScript
- Size: 30.3 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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) =>
}
})
md.render(``)
```
### 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(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 ;
}
})
return md.render(text);
}, [text]);
return (
)
}
```
### 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(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 ;
}
}, {
unsafeRenderFunction: true,
})
return md.render(text);
}, [text]);
return (
)
}
```