convert Latex to function component to work without 'use client'

harunurhan · Mar 9, 2024 · 782adb0 · 782adb0
1 parent 0ac4d8c
commit 782adb0
Showing 1 changed file with 12 additions and 18 deletions.
diff --git a/src/Latex.tsx b/src/Latex.tsx
@@ -11,22 +11,16 @@ export interface LatexProps {
   macros?: Macros
 }
 
-export default class Latex extends React.Component<LatexProps> {
-  static defaultProps: Partial<LatexProps> = {
-    delimiters: [
-      { left: '$$', right: '$$', display: true },
-      { left: '\\(', right: '\\)', display: false },
-      { left: '$', right: '$', display: false },
-      { left: '\\[', right: '\\]', display: true },
-    ],
-    strict: false
-  };
+const defaultDelimiters = [
+  { left: '$$', right: '$$', display: true },
+  { left: '\\(', right: '\\)', display: false },
+  { left: '$', right: '$', display: false },
+  { left: '\\[', right: '\\]', display: true },
+]
 
-  render() {
-    const { children, delimiters, strict, macros } = this.props
-    const renderedLatex = renderLatex(Array.isArray(children) ? children.join('') : children, delimiters!, strict!, macros);
-    return (
-      <span className="__Latex__" dangerouslySetInnerHTML={{ __html: renderedLatex }} />
-    )
-  }
-}
+export default function Latex({children, delimiters = defaultDelimiters, strict = false, macros }: LatexProps): React.ReactNode {
+  const renderedLatex = renderLatex(Array.isArray(children) ? children.join('') : children, delimiters!, strict!, macros);
+  return (
+    <span className="__Latex__" dangerouslySetInnerHTML={{ __html: renderedLatex }} />
+  )
+}