Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
@matejmazur/react-katex
Advanced tools
Display math expressions with KaTeX and React.
(based on the https://github.com/talyssonoc/react-katex)
(the readme and the demo are "forked" from https://github.com/talyssonoc/react-katex)
Comparison with react-katex
: https://github.com/talyssonoc/react-katex/issues/49.
$ npm install katex @matejmazur/react-katex
# or
$ yarn add katex @matejmazur/react-katex
import 'katex/dist/katex.min.css';
import TeX from '@matejmazur/react-katex';
Display math in the middle of the text.
ReactDOM.render(
<TeX math="\\int_0^\\infty x^2 dx" />,
document.getElementById('math')
);
// or
ReactDOM.render(
<TeX>\int_0^\infty x^2 dx</TeX>,
document.getElementById('math')
);
It will be rendered like this:
Display math in a separated block, with larger font and symbols.
ReactDOM.render(
<TeX math="\\int_0^\\infty x^2 dx" block />,
document.getElementById('math')
);
// or
ReactDOM.render(
<TeX block>\int_0^\infty x^2 dx</TeX>,
document.getElementById('math')
);
It will be rendered like this:
Note:
Don't forget to import KaTeX CSS file.
import 'katex/dist/katex.min.css';
By default the error rendering is handled by KaTeX. You can optionally pass errorColor
(defaults to #cc0000
) as a prop:
ReactDOM.render(
<TeX math={'\\int_0^\\infty x^2 dx \\inta'} errorColor={'#cc0000'} />,
document.getElementById('math')
);
This will be rendered like so:
It'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:
ReactDOM.render(
<TeX
math="\\int_{"
renderError={(error) => {
return <b>Fail: {error.name}</b>;
}}
/>,
document.getElementById('math')
);
// The code above will render '<b>Fail: ParseError</b>' because it's the value returned from `renderError`.
This will render <b>Fail: ParseError</b>
:
You can change the wrapper component (block math uses div
and inline uses span
) by whatever you want via props.as
attribute.
ReactDOM.render(
<TeX
math="y = x^2"
as="figcaption"
/>,
document.getElementById('math')
);
In addition to using the math
property, you can also quote as a child allowing the use of { }
in your expression.
ReactDOM.render(
<TeX>{'\\frac{\\text{m}}{\\text{s}^2}'}</TeX>,
document.getElementById('math')
);
Or Multiline
ReactDOM.render(
<TeX>{`\\frac{\\text{m}}
{\\text{s}^2}`}</TeX>,
document.getElementById('math')
);
However, it can be annoying to escape backslashes. This can be circumvented with the String.raw
tag on a template literal when using ES6.
ReactDOM.render(
<TeX>{String.raw`\frac{\text{m}}{\text{s}^2}`}</TeX>,
document.getElementById('math')
);
Backticks must be escaped with a backslash but would be passed to KaTeX as \`. A tag can be created to replace \` with `
const latex = (...a) => String.raw(...a).replace('\\`', '`');
ReactDOM.render(<TeX>{latex`\``}</TeX>, document.getElementById('math'));
You can even do variable substitution
const top = 'm';
const bottom = 's';
ReactDOM.render(
<TeX>{String.raw`\frac{\text{${top}}}{\text{${bottom}}^2}`}</TeX>,
document.getElementById('math')
);
You can change directly all KaTeX options via props.settings
:
Example of adding a custom macro:
ReactDOM.render(
<TeX settings={{ macros: { '*': '\\cdot' } }}>y = k * x + c</TeX>
);
Result:
FAQs
Display math in TeX with KaTeX and ReactJS
The npm package @matejmazur/react-katex receives a total of 24,298 weekly downloads. As such, @matejmazur/react-katex popularity was classified as popular.
We found that @matejmazur/react-katex demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.