CODEWITHSUNDEEP
javascriptnode.jsreactjs
TrivialCase
TrivialCase

Reputation: 1099

using npm package in react app

I have some ad-hoc javascript knowledge and am trying to learn react, but can't seem to locate documentation on how to use imports correctly. Specifically, I have a quick app that fetches a value from an api I set up, and I would like to format the number using katex. There is a react-katex package I installed using npm, but the instructions don't seem to cover how to accomplish this using webpack/jsx/whatever.

More specifically, how would I use the package? The documentation says to use it thus

var BlockMath = ReactKaTeX.BlockMath;

ReactDOM.render(<BlockMath math="\\int_0^\\infty x^2 dx"/>, document.getElementById('katex-element'));

but when I do this in the example code below I get an error that the element katex-element is undefined. I realize (I think) that the first line is replaced by the import command, so I know I don't need that, but where do I put the BlockMath call to get it to render the number in tex?

Here is my example app, I've tried a few things, but I either end up getting undefined errors, or no result at all:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// ?? import '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
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
          Also <span id="katexElement">{number}</span>
        </p>
      </div>
    );
  }
}

export default App;

I think there is a similar question here: Is there a different between using an npm package in Node.js vs using it in React / webpack?

Upvotes: 0

Views: 2412

Answers (2)

Raghav Garg
Raghav Garg

Reputation: 3707

you can import it using 

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

Notice the curly braces {}, it will get only specified property from the library and not the whole library.

and can use these component directly in your jsx, like:

const inlineMath = (
    <div>
        <InlineMath math="\\int_0^\\infty x^2 dx"/>
    </div>
);

Notice: Please dont forget to add css.

Don't forget to import KaTeX CSS file (see example/index.html).

Use this inside your index.html to import css in your code.

<link rel="stylesheet" href="../node_modules/katex/dist/katex.min.css">

I would suggest you to use {} braces to get only the specific property from the library rather than loading the whole library at once. Also it makes the code much more clearer and readable.

Upvotes: 1

gjvoit
gjvoit

Reputation: 11

Using import {InlineMath, BlockMath} from 'react-katex' would let you leverage InlineMath.function().

Alternatively, you should just be able to include

  • import ReactKatex from react-katex

which would then allow you to access the entire library via ReactKatex.subexport.function where subexport is a nested module (such as InlineMath from the example above) and function is a defined function within that submodule.

Upvotes: 1

Related Questions