{"id":15288227,"url":"https://github.com/pkasila/reactkatex","last_synced_at":"2026-01-05T02:55:11.726Z","repository":{"id":43421313,"uuid":"510461587","full_name":"pkasila/ReactKatex","owner":"pkasila","description":"ReactKatex is a React component which allows to render LaTeX formulas and in plain text using KaTeX","archived":false,"fork":false,"pushed_at":"2022-07-20T13:14:24.000Z","size":68,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T18:06:43.450Z","etag":null,"topics":["formula","katex","latex","mathml","react","typescript"],"latest_commit_sha":null,"homepage":"","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/pkasila.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"patreon":"pkasila"}},"created_at":"2022-07-04T18:16:14.000Z","updated_at":"2022-07-09T23:53:51.000Z","dependencies_parsed_at":"2022-09-08T23:41:35.262Z","dependency_job_id":null,"html_url":"https://github.com/pkasila/ReactKatex","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":"ryansonshine/typescript-npm-package-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkasila%2FReactKatex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkasila%2FReactKatex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkasila%2FReactKatex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkasila%2FReactKatex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pkasila","download_url":"https://codeload.github.com/pkasila/ReactKatex/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245212304,"owners_count":20578443,"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":["formula","katex","latex","mathml","react","typescript"],"created_at":"2024-09-30T15:44:49.399Z","updated_at":"2026-01-05T02:55:11.691Z","avatar_url":"https://github.com/pkasila.png","language":"TypeScript","funding_links":["https://patreon.com/pkasila"],"categories":[],"sub_categories":[],"readme":"# @pkasila/react-katex\n\n[![npm package][npm-img]][npm-url]\n[![Build Status][build-img]][build-url]\n[![Downloads][downloads-img]][downloads-url]\n[![Issues][issues-img]][issues-url]\n[![Code Coverage][codecov-img]][codecov-url]\n[![Commitizen Friendly][commitizen-img]][commitizen-url]\n[![Semantic Release][semantic-release-img]][semantic-release-url]\n\n\u003e ReactKatex is a React component which allows to render LaTeX formulas and in plain text using KaTeX\n\n## Install\n\n```bash\nnpm install @pkasila/react-katex\n```\n\n### KaTeX stylesheets\n\n**Remember** to include KaTeX's stylesheets:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/katex@0.16.0/dist/katex.min.css\"\u003e\n```\n\n## Usage\n\n```tsx\nimport ReactKatex from '@pkasila/react-katex';\n\nfunction Home() {\n  return \u003cReactKatex\u003eExample: $$v = 2$$\u003c/ReactKatex\u003e\n}\n\nconst latex = 'Example: $$v = 2$$';\n\nfunction UseChildrenProp() {\n  return \u003cReactKatex children={latex}\u003e\u003c/ReactKatex\u003e\n}\n\nfunction EnforceDisplayMode() {\n  return \u003cReactKatex displayMode={true}\u003eExample: $v = 2$\u003c/ReactKatex\u003e\n}\n\nfunction DifferentModes() {\n  return \u003cReactKatex displayMode={true}\u003eExample $\\textbf{inline}$: $$v = 2$$\u003c/ReactKatex\u003e\n}\n```\n\n### ReactKatex's MathML fallback mechanism\n\n\u003e While Safari and Firefox support MathML, Chrome will support MathML Core by default\n\u003e only in **mid-September 2022** with version 106, more details on the\n\u003e [Chrome Platform Status](https://chromestatus.com/feature/5240822173794304).\n\u003e Right now MathML core is available in Chrome with a flag\n\u003e [chrome://flags/#enable-experimental-web-platform-features](chrome://flags/#enable-experimental-web-platform-features)\n\nBy default, ReactKatex uses `htmlAndMathml` output. It's done that way because still, some browsers don't\nsupport MathML at the moment. For these browsers, ReactKatex implements a fallback mechanism: if the browser\ndoesn't support MathML but `output` is set to `mathml`, then ReactKatex will automatically switch to `html`\noutput when passing options to KaTeX.\n\nYou can disable this behavior by passing the `enforceOutput` option set to `true`.\n\n## API\n\n### ReactKatex\n\n#### custom `output` behavior\n\nBy default, it's set to `htmlAndMathml`. If you choose `mathml` then ReactKatex will run checks to validate\nthat the client's browser supports MathML. If not, then it will switch to default `htmlAndMathml` renderer.\n\nWhen using SSR, ReactKatex will consider that MathML is supported, so what you pass into `output` will stay\nas it is. But on the client-side while rendering the second time it **may** run check and switch from `mathml`\nto `htmlAndMathml`.\n\nIf you use Remix.JS and ReactKatex has `mathml` output and have user without MathML support, then it will behave\nlike that:\n\n1. Server will render MathML\n2. Client will display MathML\n3. User interacts with the app (switches pages, or somehow causes component to rerender)\n4. Client rerenders ReactKatex with `htmlAndMathml` output\n\n#### `enforceOutput`\n\n`enforceOutput` option disables ReactKatex's MathML check. So, if you pass this property, then it won't switch\nto `htmlAndMathml` if you specified output as `mathml` in any possible case.\n\n#### `breakLine`\n\nBy default, `breakLine` is set to `false`. But if you set it to `true`, then it will replace `\\n\\n` in your string\nwith `\u003cbr /\u003e` HTML tag. It may be useful in some cases.\n\n### KaTeX's options and format\n\nReactKatex renders formulas inside `$` (inline-mode)  or `$$` (block-mode).\n\nReactKatex's options (props) are basically KaTeX's options [here](https://katex.org/docs/options.html).\nAll (or almost) are available.\n\n[build-img]:https://github.com/pkasila/ReactKatex/actions/workflows/release.yml/badge.svg\n[build-url]:https://github.com/pkasila/ReactKatex/actions/workflows/release.yml\n[downloads-img]:https://img.shields.io/npm/dt/@pkasila/react-katex\n[downloads-url]:https://www.npmtrends.com/@pkasila/react-katex\n[npm-img]:https://img.shields.io/npm/v/@pkasila/react-katex\n[npm-url]:https://www.npmjs.com/package/@pkasila/react-katex\n[issues-img]:https://img.shields.io/github/issues/pkasila/ReactKatex\n[issues-url]:https://github.com/pkasila/ReactKatex/issues\n[codecov-img]:https://codecov.io/gh/pkasila/ReactKatex/branch/main/graph/badge.svg\n[codecov-url]:https://codecov.io/gh/pkasila/ReactKatex\n[semantic-release-img]:https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\n[semantic-release-url]:https://github.com/semantic-release/semantic-release\n[commitizen-img]:https://img.shields.io/badge/commitizen-friendly-brightgreen.svg\n[commitizen-url]:http://commitizen.github.io/cz-cli/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpkasila%2Freactkatex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpkasila%2Freactkatex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpkasila%2Freactkatex/lists"}