talyssonoc / react-katex Goto Github PK
View Code? Open in Web Editor NEWDisplay math in TeX with KaTeX and ReactJS
Display math in TeX with KaTeX and ReactJS
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.
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?
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?
<TeX>
which has props.block
for indicating block math (breaking change)peerDependencies
(so users don't need to wait for updating this lib, it should be their responsibility)<TeX />
component is memoized (new React.memo(Component)
) by default so you can avoid unnecesary rerenders<TeX />
component accepts other props (like className
, id
, style
,...) which are given to the span
/div
props.settings
for KaTeX configurationreact-testing-library
What do you think?
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.
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.
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.
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?
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?
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>)
}
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",
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?
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.
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
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.
Any plans to upgrade?
Using both components, my math expressions are being outputted twice. Any idea what's the deal?
They seem too raw right now.
\text{X = } \{ n^2 \text{: n} \in \N \}
The power of 2 is not displaying in line, and also the \N or N \natnums
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. 😄
In preparation for React 0.16, should update to using the prop-types package.
https://github.com/facebook/prop-types#prop-types
Any problem supporting React 18, or any version after 15.3.2?
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!
The breaking changes were delayed (see #56), so || ^17.0.0
should be added to the react
dependency in package.json
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')
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
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!
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.
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>
);
}
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 { x } { y }</BlockMath>
Otherwise, thanks for the great library! Very useful! Just want to use it for more complex equations. :)
Abigail
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.
Needed for Typescript support
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.