npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-latex-next

v2.3.0

Published

Render LaTeX in React apps

Downloads

16,810

Readme

react-latex-next

Render LaTeX beautifully in React apps!

NPM JavaScript Style Guide

It renders all fragments of LaTeX (between delimiters) in a given text, similar to KaTeX's auto-render.

See the demo.

Install

yarn add react-latex-next

npm install --save react-latex-next

Usage

import 'katex/dist/katex.min.css';
import Latex from 'react-latex-next';

function Example() {
  return (
    <Latex>We give illustrations for the {1 + 2} processes $e^+e^-$, gluon-gluon and $\\gamma\\gamma \\to W t\\bar b$.</Latex>
  );
}

Note: katex CSS needs to be included in your final bundle. Above example is using import to load css but depending on how the code & styles are built and bundled, it may be different for your case.

delimiters

List of delimiters to look for math you can configure it via delimiters prop: <Latex delimiters={[...]}>

A delimiter

{
  left: "A string which starts the math expression (i.e. the left delimiter)"
  right: "A string which ends the math expression (i.e. the right delimiter)"
  display: "A boolean of whether the math in the expression should be rendered in display mode or not"
}

Default delimiters

[
  { left: '$$', right: '$$', display: true },
  { left: '\\(', right: '\\)', display: false },
  { left: '$', right: '$', display: false },
  { left: '\\[', right: '\\]', display: true },
]

strict

It renders by default non-strict which means it falls back to raw text (without delimiters) in case of error. You can enable strict mode like below, which will throw the error instead.

<Latex strict>{textWithSomeBrokenLatex}</Latex>

macros

A collection of custom macros. Each macro is a property with a name like \name (written \\name in JavaScript) which maps to a string that describes the expansion of the macro.

macros object is also used to persists macros defined in LaTeX via \gdef, refer to the KaTeX docs for more details (and security implications)

<Latex macros={{ "\\f": "#1f(#2)" }}>{'$\\f\\relax{x} = x$ is rendered using macros'}</Latex>

License

MIT © harunurhan