{"id":15288226,"url":"https://github.com/matejbransky/react-katex","last_synced_at":"2025-10-11T04:11:47.042Z","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":153,"open_issues_count":20,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-15T07:53:29.055Z","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-06-25T13:20:27.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":["matejmazur/react-katex"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MatejBransky/react-katex","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","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatejBransky%2Freact-katex/sbom","scorecard":{"id":90831,"data":{"date":"2025-08-11","repo":{"name":"github.com/MatejBransky/react-katex","commit":"5ba4e49cd520e6e40adadd88e8f7c7d497c65cd7"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"name":"Code-Review","score":1,"reason":"Found 2/14 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 19 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-15T07:53:26.513Z","repository_id":33660173,"created_at":"2025-08-15T07:53:26.514Z","updated_at":"2025-08-15T07:53:26.514Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006257,"owners_count":26084060,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-09-30T15:44:48.917Z","updated_at":"2025-10-11T04:11:47.022Z","avatar_url":"https://github.com/MatejBransky.png","language":"TypeScript","funding_links":[],"categories":[],"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"}