talyssonoc / react-katex Goto Github PK

code below:

import 'katex/dist/katex.min.css';
import { InlineMath, BlockMath } from 'react-katex';
render() {
return(<BlockMath>\int_0^\infty x^2 dx</BlockMath>)
}

output:

According to david-dm (https://david-dm.org/talyssonoc/react-katex?type=dev), there are some dev dependencies that are outdated.

Can you update the repo to use prop-types package as using React.PropTypes gives warning.

I tried to update it but got stuck with uglify js plugin.

Hey sorry to hit you with something else to look at, but I am getting results like the following. I have an InlineMath that should be rendering -\frac{\pi}{5} - 7912 \times i but I am getting this output:

I seem to be consistently getting this with fractions and square roots, but the tex input looks correct to me. Not sure if this is your issue or if it trickles down from katex or what. Packages are [email protected] and [email protected]. Let me know what info I can provide to help.

It would be nice if there were a way to handle "KaTeX parse errors", without the component failing in the constructor (generateHtml) function.

Perhaps an "onError" property: if it's specified, errors in katex.renderToString(latex) will be caught, and sent to the onError function for custom handling -- perhaps having the return value of it being what will be displayed in place of the formula. (in my case, I'd just render the parsing error as plain-text, in place of the formula)

In my project, the reason this is needed is because the website content is created by the users, so they can enter formulas themselves. And I don't want them to get confused by the project-level error message boxes that currently show up (from uncaught errors) -- instead, a localized message would be more helpful.

Katex allows for a number of options to be passed such as macros but right now only error color seems to be implemented.

Would you accept a PR to implement macros?

I am using this module via webpack + TypeScript. My configuration does not parse "*.js" as JSX, and so errors when I import specific modules:

import {InlineMath, BlockMath} from 'react-katex'

Fix is simple; rename files that use JSX syntax to be *.jsx

I can open a PR for this if not already done by Monday. Working on PR.

Hey guys,

Are you planning to update this for use in react16 and ES6? Would really like to use your package, but can't get it working with the setup above.

Hi there,

I would like to use your package, but I can't seem to get it working. I'm getting the following error:

TypeError: undefined is not an object (evaluating '_react2.default.PropTypes.string')

Hi there,
Any idea on how to escape brackets? I'm trying to create some more complex equations that involve fractions and use the katex bracket notation, but React is trying to handle the brackets instead.

http://tiddlywiki.com/plugins/tiddlywiki/katex/

I've tried escaping the characters a couple different ways, but nothing has worked yet.

Example:

// this fails
<BlockMath>Foo = \frac{x}{y}</BlockMath>

// was hoping for 
// Foo = x/y

// this also fails
<BlockMath>Foo = \frac\{x\}\{y\}</BlockMath>

// fail
<BlockMath>Foo = \frac/{x/}/{y/}</BlockMath>

// fail :(
<BlockMath>Foo = \frac &#123 x &#125 &#123 y &#125</BlockMath>

Otherwise, thanks for the great library! Very useful! Just want to use it for more complex equations. :)
Abigail

Hey

How can I upgrade react-katex to latest version of katex?
The current version does not support newline syntax \\ and \newline

Try yourself at https://katex.org/versions.html and you would see something like below

Please let me know
Thanks

Looks like KaTeX only respects throwOnError: false for invalid commands (KaTeX/KaTeX#475), not for any kind of error (unmatched brackets, for example, still throws an error), it would be good to fix it before releasing the next major.

Using @nikoladev's initial approach for error handling (285749c#diff-04c6e90faac2675aa89e2176d2eec7d8R100) seems like a reasonable place to start with the solution.

Would it be possible to publish the latest version to NPM? I see that the latest source on master uses the external prop-types package as opposed to the old built-in React PropTypes.

As React 16 has been released and doesn't include the prop-types package anymore, react-katex is not compatible with it. Including the latest dist from master in my React 16 project seems to work fine, so it would be great to have a release for this :)

Thanks for the great package!

Have you contacted the creators of KaTeX about possibly having this project be recognized/adopted as an extension of KaTeX?

I know they're familiar with React things, eg: https://github.com/Khan?q=react

Just wondering, as that could help it have better maintenance, if it's an official module. (of course, there's also some disadvantages, such as possibly less control)

EDIT

Another option is to just mention it to them, so they can include a link to this project on their readme page. (like they do here, for the auto-render extension)

In my case, I found this extension by searching on google, but many people won't do that. Having it mentioned at least will help improve discoverability.

PS Also, (in case you're not yet aware of it), there's a similar "react-latex" module here (https://github.com/zzish/react-latex), which seems aimed at doing about the same thing as this module does. (it uses katex as well)

Not sure which is better, though will use this for now, since it has more stars. 😄

\text{X = } \{ n^2 \text{: n} \in \N \}

The power of 2 is not displaying in line, and also the \N or N \natnums

The breaking changes were delayed (see #56), so || ^17.0.0 should be added to the react dependency in package.json

Needed for Typescript support

https://mhchem.github.io/MathJax-mhchem/

with normal katex :
import 'katex/dist/contrib/mhchem'

mhchem is not in the distribution of react-katex

import React, { useState, useEffect } from 'react';
import './style.css';
import 'katex/dist/katex.min.css';
// import { InlineMath , BlockMath } from 'react-katex'
// import 'katex/dist/contrib/mhchem'
// import 'katex/dist/contrib/auto-render'
// import { renderMathInElement } from 'react-katex/dist/contrib/auto-render'
import load from 'little-loader';
load('https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js', function() {
  load(
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/mhchem.min.js',
    function() {
      load(
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js',
        function() {
          renderMathInElement(document.body);
        }
      );
    }
  );
});

export default function App() {
  // useEffect( () => { renderMathInElement( document.body ) } );
  return (
    <div>
      {/* <BlockMath>
          {String.raw`H_2O`}
        </BlockMath>
        <BlockMath>
          {String.raw`\ce{H_2O}`}
        </BlockMath> */}

      <p>$$H_2O$$</p>
      <p>{String.raw`$$\ce{H_2O}$$`}</p>
    </div>
  );
}

Not sure if I'm just doing it wrong (new to react and jsx) but I seem to have everything setup correctly, but then I don't get the expected output. Here is a pretty minimal App.js example where I grab a number from an api and try to display it:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {BlockMath} from 'react-katex';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      number: 0
    }
  }
  componentDidMount() {
    fetch('http://localhost:4001/api/get_number')
      .then(data => data.json())
      .then(data => {
        this.setState({
          number: data.number
        })
      })
  }
  render() {
    const number = this.state.number.toString()
    const number_block = React.createElement(BlockMath, null, number)
    //console.log(number_block)
    return (
      <div className="App">
        <p>
          Here is a number: {number_block}
        </p>
      </div>
    );
  }
}

export default App;

where number = "-\frac{\pi}{54}" and my output is:

Here is a number:
-\frac{\pi}{54}−54π​

Not sure why it writes the latex before rendering it, nor why the fraction doesn't render but the pi does?

Any plans to upgrade?

In preparation for React 0.16, should update to using the prop-types package.
https://github.com/facebook/prop-types#prop-types

the code is copy form github ReadMe demo , but cant work , the office demo like that:

Hi, I would like to find a common path where we can merge this repo (I used my starter for react lib and the source code is completely rewritten but the readme is forked from yours) with your repo. Do you think it's possible?

Differences:

• components are merged into the one <TeX> which has props.block for indicating block math (breaking change)
• KaTeX is moved into the peerDependencies (so users don't need to wait for updating this lib, it should be their responsibility)
• the size of the lib is now correct because it doesn't include the whole katex library
• <TeX /> component is memoized (new React.memo(Component)) by default so you can avoid unnecesary rerenders
• from the previous is clear that it needs React >=16.6.0
• <TeX /> component accepts other props (like className, id, style,...) which are given to the span/div
• added props.settings for KaTeX configuration
• examples in repo are accessible (live) via codesandbox
• tests are done with Jest (with snapshots) and react-testing-library
• added husky+lint-staged+prettier-eslint for formatting before commiting
• it is bundled with microbundle (multiple outputs: ESM, UMD, CJS)

What do you think?

Hi,
I'm using a react-katex library with remix.run and for some reason, formulas look strange.

Here is the tex:

\mathrm{R}_{u}=\frac{\Delta U}{\Delta I} \Rightarrow \mathrm{R}_{u}=\frac{U_{2}-U_{1}}{I_{1}-I_{2}} \Rightarrow \mathrm{R}_{u}=\frac{U_{2}-U_{1}}{\frac{U_{1}}{R_{1}}-\frac{1}{3} \cdot \frac{U_{1}}{R_{1}}} \Rightarrow \mathrm{R}_{u}=\frac{U_{2}-U_{1}}{\frac{2}{3} \cdot \frac{U_{1}}{R_{1}}}=\frac{10-5}{\frac{2}{3} \cdot \frac{5}{R_{1}}}=\frac{5}{\frac{10}{3 \cdot R_{1}}}=\frac{15 \cdot R_{1}}{10}=1.5 \cdot R_{1}

I don't really know what is wrong or where to start with fixing it.

Hello!

I'm using this package in a NextJS project. When in development mode, everything works as expected. However, in the production mode there is a greater than symbol added in front of each character of an equation.

The greater than symbol is not present in the server-rendered html files, it seems to be added dynamically.

Does anyone know why that might be?

In package.json I do have
"katex": "^0.9.0-beta","react": "^16.2.0", "react-katex": "^1.2.0",

When importing: import { BlockMath } from 'react-katex';

I get the error Uncaught TypeError: Cannot read property 'string' of undefined at Object. (bundle.js:65414) at webpack_require (bundle.js:65334) at Object. (bundle.js:65367) at webpack_require (bundle.js:65334) at bundle.js:65354 at bundle.js:65357 at webpackUniversalModuleDefinition (bundle.js:65307) at Object. (bundle.js:65314) at webpack_require (bundle.js:20) at Object.defineProperty.value

Along with warnings when building:

npm install --save react-katex npm WARN [email protected] requires a peer of katex@^0.7.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react@^15.3.2 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of react@^15.3.0 but none is installed. You must install peer dependencies yourself.

So it seems a bit odd this maybe is the newer version of React supported?

I did try this which maybe related by installing prop types but didnt seem to make a difference installing that.

Setting the versions to this solves the problem:
Removing the warnings has worked so setting the values to:
"react-katex": "1.2.0",
"katex": "^0.7.0",
"react": "15.3.2",

请问，我使用react-katex组件的时候，发现如果字符串中包含中文的时候，就会报错

例：

错误信息：

请问如何支持中文字符呢

Using both components, my math expressions are being outputted twice. Any idea what's the deal?

They seem too raw right now.

According to the Katex docs /cfrac is supported.

https://katex.org/docs/support_table.html

But when trying to render \cfrac{2}{1+\cfrac{2}{1+\cfrac{2}{1}}} I'm getting a render error.

I'm rendering the string directly from a <textarea>.

<BlockMath errorColor={'tomato'}>{this.latexString}</BlockMath>

Is there anything I'm missing or is this a bug?

As mentioned in the official ReactJS documentation Update on Async Rendering, the function componentWillReceiveProps will be deprecated in future versions of React. Right now, the old function is still included in createMathComponent.js. Please consider changing it to getDerivedStateFromProps as suggested in the documentation.

Using this library, I see the following warning in my console (Firefox):

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: MathComponent

According to the warning, this library will stop functioning in React 17+. There is #53 open, but maybe something along the lines of #49 would be a longer-term solution. There, @MatejBransky suggests a merge with their library which is less popular* but maintained.

* popularity: based on github stars and downloads

Any problem supporting React 18, or any version after 15.3.2?

I am using NextJS.

I have written code like this, but I am not getting mathematical output. The mathematical equation is still same as before.

import 'katex/dist/katex.min.css';
import dynamic from 'next/dynamic';
import { InlineMath, BlockMath } from 'react-katex';

// Initialize markdown-it with the Katex plugin for LaTeX rendering
export default function TestPage() {
    return (
    <div>
        <InlineMath math="\\int_0^\\infty x^2 dx"/>,
    </div>)
}

Unexpected behaviour! If you give it some specific input, it has the potential to crash the entire website.

Example: \begin{\pmatrix}. This will not render probably, error handling will work incorrectly and completely remove the entire body of the website!

This is a quick one. Since you use divs for your dangerouslySetInnerHTML elements, we get a warning that <div> cannot appear as a descendant of <p>. You can fix this by changing them to span elements instead. See here and here.