A React component for typesetting mathematics using KaTeX
npm install reactify-katexreactify-katex is an NPM package that provides a simple and convenient way to use KaTeX in React applications. This package includes two components, BlockMath and InlineMath, which can be used to render mathematical expressions.
To install reactify-katex, use the following command:
``bashnpm
npm install --save reactify-katex
Usage
`tsx
import React from 'react';
import { BlockMath, InlineMath } from 'reactify-katex';
import 'katex/dist/katex.min.css';const App = () => {
return (
<>
>
);
};
export default App;
`API
$3
The
BlockMath component is used to render mathematical equations and symbols in display mode. It takes the following props:-
math (string, optional): the KaTeX string to be rendered.
- children (string, optional): an alternative way to pass the KaTeX string as a child.
- errorColor (string, optional): the color of the error message displayed if the KaTeX string is invalid (default is 'red').
- renderError (function, optional): a function that returns a React element to be displayed if the KaTeX string is invalid (useful for customizing the error message).`tsx
math={'\\frac{1}{n}'}
errorColor={'blue'}
renderError={(error) => {error.message}}
/>;{
/ Alternatively, you can pass the KaTeX string as a child /
}
{'\\frac{1}{n}'} ;
`$3
The
InlineMath component is used to render mathematical equations and symbols in inline mode. It takes the same props as BlockMath.`tsx
;{
/ Alternatively, you can pass the KaTeX string as a child /
}
x^2 + y^2 = z^2 ;
``This package is licensed under the MIT License.