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

$3

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

$3

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

- import ReactSum from '@lundiak/react-sum' for usage.

or

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

$3

| _Prop_ | _Description_ | _Default value_ |
| ------ | :-----------: | :-------------: |
| a | a | undefined |
| b | b | undefined |

$3

| _Prop_ | _Description_ | _Default value_ |
| --------- | :-----------------------------------: | :-------------: |
| useImages | renders Sum sign as Image | false |
| useASCII | renders Sum sign as ASCII Math symbol | false |

$3

How to add to your file MyApp.jsx:

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

export const MyApp = () => {
return ;
};
`

$3

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

`jsx
const Test = () => ;
`

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

`jsx
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 (



);
};
`

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