# reactify-katex

> A React component for typesetting mathematics using KaTeX

Latest version **0.1.0** (published 2024-04-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactify-katex
pnpm add reactify-katex
yarn add reactify-katex
bun add reactify-katex
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2024-04-17 |
| First published | 2023-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mohammad Abu Mattar |
| Maintainers | mkabumattar |
| Keywords | react, katex, math, mathematics, typesetting, component, react-component, react-katex, reactify-katex |

## Links

- npm: https://www.npmjs.com/package/reactify-katex
- Repository: https://github.com/mkabumattar/reactify-katex
- Homepage: https://github.com/mkabumattar/reactify-katex#readme
- Issues: https://github.com/mkabumattar/reactify-katex/issues
- npm.io page: https://npm.io/package/reactify-katex

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2024-04-17
- 0.0.3 — 2023-04-02
- 0.0.2 — 2023-04-02
- 0.0.1 — 2023-04-02

## README

# reactify-katex

`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.

## Installation

To install `reactify-katex`, use the following command:

```bash
# npm
npm install --save reactify-katex

# yarn
yarn add reactify-katex

# pnpm
pnpm add reactify-katex
```

## Usage

```tsx
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;
```

## API

### `BlockMath`

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
<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>;
```

### `InlineMath`

The `InlineMath` component is used to render mathematical equations and symbols in inline mode. It takes the same props as `BlockMath`.

```tsx
<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>;
```

## License

This package is licensed under the MIT License.

---
_Source: https://npm.io/package/reactify-katex · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._