openstatus.dev
Openstatus
www.openstatus.dev
1import type { AnchorHTMLAttributes } from "react";
2import { Fragment, createElement, useEffect, useState } from "react";
3import { jsx, jsxs } from "react/jsx-runtime";
4import rehypeReact from "rehype-react";
5import remarkParse from "remark-parse";
6import remarkRehype from "remark-rehype";
7import { unified } from "unified";
8
9export function useProcessor(text: string) {
10 const [Content, setContent] = useState<React.ReactNode>(null);
11
12 useEffect(() => {
13 unified()
14 .use(remarkParse)
15 .use(remarkRehype)
16 .use(rehypeReact, {
17 createElement,
18 Fragment,
19 jsx,
20 jsxs,
21 components: {
22 a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
23 return <a target="_blank" rel="noreferrer" {...props} />;
24 },
25 } as { [key: string]: React.ComponentType<unknown> },
26 })
27 .process(text)
28 .then((file) => {
29 setContent(file.result);
30 });
31 }, [text]);
32
33 return Content;
34}