{"id":18488395,"url":"https://github.com/MatejBransky/react-katex","last_synced_at":"2025-04-08T21:30:27.672Z","repository":{"id":33660173,"uuid":"156377843","full_name":"MatejBransky/react-katex","owner":"MatejBransky","description":"Display math in TeX with KaTeX and ReactJS","archived":false,"fork":false,"pushed_at":"2024-09-24T17:17:26.000Z","size":475,"stargazers_count":149,"open_issues_count":20,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T04:03:08.180Z","etag":null,"topics":["katex","latex","math","react"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/MatejMazur/react-katex/tree/master/demo?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FExample.tsx\u0026theme=dark","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MatejBransky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-06T12:07:38.000Z","updated_at":"2025-02-01T15:57:32.000Z","dependencies_parsed_at":"2023-10-12T17:12:06.855Z","dependency_job_id":"497d4d00-5263-4a6d-b961-553ae58a257c","html_url":"https://github.com/MatejBransky/react-katex","commit_stats":{"total_commits":135,"total_committers":9,"mean_commits":15.0,"dds":0.3481481481481481,"last_synced_commit":"5ba4e49cd520e6e40adadd88e8f7c7d497c65cd7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatejBransky%2Freact-katex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatejBransky%2Freact-katex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatejBransky%2Freact-katex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatejBransky%2Freact-katex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MatejBransky","download_url":"https://codeload.github.com/MatejBransky/react-katex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247930957,"owners_count":21020140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["katex","latex","math","react"],"created_at":"2024-11-06T12:51:40.738Z","updated_at":"2025-04-08T21:30:27.664Z","avatar_url":"https://github.com/MatejBransky.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003e\n  react-katex\n\u003c/h1\u003e\n\u003cp\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/MatejMazur/react-katex/master/docs/react-katex-logo.png\" /\u003e\u003cbr /\u003e\n  Display math expressions with \u003ca href=\"https://khan.github.io/KaTeX\" target=\"_blank\"\u003eKaTeX\u003c/a\u003e and \u003ca href=\"https://reactjs.org\" target=\"_blank\"\u003eReact\u003c/a\u003e.\n\u003c/p\u003e\n\u003cp\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/MatejMazur/react-katex/master/docs/example.gif\" /\u003e\n\u003c/p\u003e\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/github/MatejMazur/react-katex/tree/master/demo?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FExample.tsx\" target=\"_blank\"\u003eExamples\u003c/a\u003e\n\u003c/p\u003e\n\u003cp\u003e\n  \u003ci\u003e\u003csmall\u003e(based on the \u003ca href=\"https://github.com/talyssonoc/react-katex\" target=\"_blank\"\u003ehttps://github.com/talyssonoc/react-katex\u003c/a\u003e)\u003c/small\u003e\u003c/i\u003e\u003cbr /\u003e\n  \u003ci\u003e\u003csmall\u003e\n    (the readme and the demo are \"forked\" from \u003ca href=\"https://github.com/talyssonoc/react-katex\" target=\"_blank\"\u003ehttps://github.com/talyssonoc/react-katex\u003c/a\u003e)\n  \u003c/small\u003e\u003c/i\u003e\n\u003c/p\u003e\n\u003c/div\u003e\n\u003chr /\u003e\n\nComparison with `react-katex`: https://github.com/talyssonoc/react-katex/issues/49.\n\n![npm type definitions](https://img.shields.io/npm/types/typescript)\n\n## Installation\n\n```sh\n  $ npm install katex @matejmazur/react-katex\n  # or\n  $ yarn add katex @matejmazur/react-katex\n```\n\n## Usage\n\n```jsx\nimport 'katex/dist/katex.min.css';\nimport TeX from '@matejmazur/react-katex';\n```\n\n### Inline math\n\nDisplay math in the middle of the text.\n\n```jsx\nReactDOM.render(\n  \u003cTeX math=\"\\int_0^\\infty x^2 dx\" /\u003e,\n  document.getElementById('math')\n);\n\n// or\n\nReactDOM.render(\n  \u003cTeX\u003e\\int_0^\\infty x^2 dx\u003c/TeX\u003e,\n  document.getElementById('math')\n);\n```\n\nIt will be rendered like this:\n\n![Inline math](https://raw.githubusercontent.com/MatejMazur/react-katex/master/docs/inline.png)\n\n### Block math\n\nDisplay math in a separated block, with larger font and symbols.\n\n```jsx\nReactDOM.render(\n  \u003cTeX math=\"\\int_0^\\infty x^2 dx\" block /\u003e,\n  document.getElementById('math')\n);\n\n// or\n\nReactDOM.render(\n  \u003cTeX block\u003e\\int_0^\\infty x^2 dx\u003c/TeX\u003e,\n  document.getElementById('math')\n);\n```\n\nIt will be rendered like this:\n\n![Block math](https://raw.githubusercontent.com/MatejMazur/react-katex/master/docs/block.png)\n\n**Note:**\u003cbr\u003e\nDon't forget to import KaTeX CSS file.\n\n```jsx\nimport 'katex/dist/katex.min.css';\n```\n\n### Error handling\n\n#### Default error message\n\nBy default the error rendering is handled by KaTeX. You can optionally pass `errorColor` (defaults to `#cc0000`) as a prop:\n\n```jsx\nReactDOM.render(\n  \u003cTeX math={'\\\\int_0^\\\\infty x^2 dx \\\\inta'} errorColor={'#cc0000'} /\u003e,\n  document.getElementById('math')\n);\n```\n\nThis will be rendered like so:\n\n![KaTeX error](https://raw.githubusercontent.com/MatejMazur/react-katex/master/docs/error.png)\n\n#### Custom error message\n\nIt's possible to handle parse errors using the prop `renderError`. This prop must be a function that receives the error object and returns what should be rendered when parsing fails:\n\n```jsx\nReactDOM.render(\n  \u003cTeX\n    math=\"\\\\int_{\"\n    renderError={(error) =\u003e {\n      return \u003cb\u003eFail: {error.name}\u003c/b\u003e;\n    }}\n  /\u003e,\n  document.getElementById('math')\n);\n\n// The code above will render '\u003cb\u003eFail: ParseError\u003c/b\u003e' because it's the value returned from `renderError`.\n```\n\nThis will render `\u003cb\u003eFail: ParseError\u003c/b\u003e`:\n\n![renderError](https://raw.githubusercontent.com/MatejMazur/react-katex/master/docs/rendererror.png)\n\n#### Custom wrapper component\n\nYou can change the wrapper component (block math uses `div` and inline uses `span`) by whatever you want via `props.as` attribute.\n\n```jsx\nReactDOM.render(\n  \u003cTeX\n    math=\"y = x^2\"\n    as=\"figcaption\"\n  /\u003e,\n  document.getElementById('math')\n);\n```\n\n### Escaping expressions\n\nIn addition to using the `math` property, you can also quote as a child allowing the use of `{ }` in your expression.\n\n```jsx\nReactDOM.render(\n  \u003cTeX\u003e{'\\\\frac{\\\\text{m}}{\\\\text{s}^2}'}\u003c/TeX\u003e,\n  document.getElementById('math')\n);\n```\n\nOr Multiline\n\n```jsx\nReactDOM.render(\n  \u003cTeX\u003e{`\\\\frac{\\\\text{m}}\n{\\\\text{s}^2}`}\u003c/TeX\u003e,\n  document.getElementById('math')\n);\n```\n\nHowever, it can be annoying to escape backslashes. This can be circumvented with the `String.raw` tag on a template literal when using ES6.\n\n```jsx\nReactDOM.render(\n  \u003cTeX\u003e{String.raw`\\frac{\\text{m}}{\\text{s}^2}`}\u003c/TeX\u003e,\n  document.getElementById('math')\n);\n```\n\nBackticks must be escaped with a backslash but would be passed to KaTeX as \\\\\\`. A tag can be created to replace \\\\\\` with \\`\n\n```jsx\nconst latex = (...a) =\u003e String.raw(...a).replace('\\\\`', '`');\nReactDOM.render(\u003cTeX\u003e{latex`\\``}\u003c/TeX\u003e, document.getElementById('math'));\n```\n\nYou can even do variable substitution\n\n```jsx\nconst top = 'm';\nconst bottom = 's';\nReactDOM.render(\n  \u003cTeX\u003e{String.raw`\\frac{\\text{${top}}}{\\text{${bottom}}^2}`}\u003c/TeX\u003e,\n  document.getElementById('math')\n);\n```\n\n### Configuring KaTeX\n\nYou can change directly [all KaTeX options](https://katex.org/docs/options.html) via `props.settings`:\n\n**Example of adding a custom macro:**\n\n```jsx\nReactDOM.render(\n  \u003cTeX settings={{ macros: { '*': '\\\\cdot' } }}\u003ey = k * x + c\u003c/TeX\u003e\n);\n```\n\nResult:\n\n![macros](https://raw.githubusercontent.com/MatejMazur/react-katex/master/docs/macros.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMatejBransky%2Freact-katex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMatejBransky%2Freact-katex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMatejBransky%2Freact-katex/lists"}