@lundiak/react-sum

React Sum

NOTE: component is under re-development, so new upcoming versions might be breaking-change-like.

Experimental ReactJS component to show sum of 2 numbers.

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} />;
};

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).

TODO

• Export typings also (need to enable declaration in tsconfig and expose *.d.ts files and then test externally/separately)

2021

README