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