reactify-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:
# npm
npm install --save reactify-katex
# yarn
yarn add reactify-katex
# pnpm
pnpm add reactify-katex
import React from 'react';
import { BlockMath, InlineMath } from 'reactify-katex';
import 'katex/dist/katex.min.css';
const App = () => {
return (
<>
<BlockMath math={'\\frac{1}{n}'} />
<InlineMath math={'x^2 + y^2 = z^2'} />
</>
);
};
export default App;
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).
<BlockMath
math={'\\frac{1}{n}'}
errorColor={'blue'}
renderError={(error) => <div>{error.message}</div>}
/>;
{
/* Alternatively, you can pass the KaTeX string as a child */
}
<BlockMath>{'\\frac{1}{n}'}</BlockMath>;
The InlineMath
component is used to render mathematical equations and symbols in inline mode. It takes the same props as BlockMath
.
<InlineMath math={'x^2 + y^2 = z^2'} />;
{
/* Alternatively, you can pass the KaTeX string as a child */
}
<InlineMath>x^2 + y^2 = z^2</InlineMath>;
This package is licensed under the MIT License.