@lundiak/react-sum

React Sum

Experimental ReactJS component to show sum of 2 numbers. There is no reasonable purpose to use this component by anyone but me :)

Experiment related to Component creation process and usage of tools, such as: npm/yarn, ESLINT, Webpack, Babel, Create React App, CSS Modules (migrated from LESS) React Scripts, Storybook, Jest, Enzyme, Cucumber and CI tool Circle CI.

Consumer Usage

Installation

• yarn add @lundiak/react-sum
• npm install --save @lundiak/react-sum

Usage

Import the component where you want to use it, and you ready to use it.

• import ReactSum from '@lundiak/react-sum' for <ReactSum.Sum /> usage.

or

• import { Sum } from '@lundiak/react-sum'; for <Sum /> usage.

Props

Prop	Description	Default value
a	a	undefined
b	b	undefined

Optional props

Prop	Description	Default value
useImages	renders Sum sign as Image	false
useASCII	renders Sum sign as ASCII Math symbol	false

Example

How to add to your file MyApp.jsx:

import { Sum } from "@lundiak/react-sum";

export const MyApp = () => {
  return <Sum a={2} b={3} />;
};

Using types

If component Sum is imported, then such line will cause TypeScript warnings about required params a and b.

const Test = () => <Sum />;

To look up what is actual typings, this code will be OK:

import { Sum } from "@lundiak/react-sum";
import type { SumProps } from "@lundiak/react-sum/types/components/sum/common";

interface MyData {
  data: SumProps;
}
export const MySumExample = (props: MyData) => {
  return (
    <div>
      <Sum a={props.data.a} b={props.data.b} />
    </div>
  );
};

Development

2025

• Decided to use only npm
• Upgraded to latest React v19.x
• Migrated from CRA + react-scripts to Vite
  • Also migrated to Vitest maybe partially with @testing-library/react. Used hints from here.
  • Also migrated jest-cucumber to @amiceli/vitest-cucumber to work with vitest
• Migrated to ESLINT v9 (via npm init @eslint/config@latest) - guide
• And also added @vitest/eslint-plugin (because legacy eslint-plugin-vitest refers to eslint v8).
• Re-Bootstrap with npm create vite@latest
• Replaced old Storybook approach by new Ladle :)
• As of July-2025 ascii-math remains built as pure JavaScript referring deep inside to MathML. And for TypeScript project there is no typings.
  • So I created ascii-math.d.ts => declare module "ascii-math"; to suppress TypeScript error.
• Added usage of alternative asciimath-parser with KaTeX aka katex
  • but KaTeX brings lot of fonts into dist after npm run build
• Maybe https://www.mathjax.org/#gettingstarted - https://github.com/mathjax/MathJax - (High-quality display of LaTeX, MathML, and AsciiMath notation in HTML pages)
  • but looks CommonJS-oriented and last updated in 2022. Not ESM-ready (only es5).
• Exported typings (enabled declaration in tsconfig to expose *.d.ts files for external codebase imports)

2021

README