DEV Community

Cover image for The JavaScript Fraction Library You Didn’t Know You Needed
Wasiu Ramoni
Wasiu Ramoni

Posted on

The JavaScript Fraction Library You Didn’t Know You Needed

Hey folks!

I’ve been tinkering with a project that’s close to my heart: Fractionability, a JavaScript/TypeScript library that makes fractions ridiculously easy to work with—and accessible to boot. Whether you’re scaling a recipe, splitting a bill, or building an educational tool, this little gem has you covered. I wanted to share it with you because, honestly, I think it’s pretty darn cool, and I’d love for you to give it a spin.

What’s the Big Deal?

Picture this: you’ve got decimals, percentages, ratios, or even mixed numbers floating around your code. Normally, you’d wrestle them into shape yourself. With Fractionability, it’s one line and done—transformed into clean, simplified fractions. Plus, it’s got MathML magic for screen readers, so your app isn’t just functional; it’s inclusive.

Here’s the rundown:

  • Converts anything: 0.753/4, '50%'1/2, '2:3'2/3.
  • Simplifies on the fly: '15/45''1/3'.
  • Does math: addition, subtraction, multiplication, division—all fraction-friendly.
  • Speaks to screen readers: MathML with natural aria-labels like "three over four".
  • Chains like a dream: fraction('1/2').add('1/3').toMixedNumber()'0 5/6'.

Why I Made It

I got tired of seeing fractions like 3 1/2 displayed as plain text on websites—screen readers butcher them, and it’s a bummer for accessibility. I figured, why not build something that handles fractions like a pro and makes them usable for everyone? Oh, and I couldn’t resist throwing in a slick API—because who doesn’t love clean code?

Let’s See It in Action

Enough talk—let’s code! Here are some examples to blow your mind:

1. Recipe Scaling: Triple That Sugar!

import { fraction, multiply } from 'fractionability';

const sugar = fraction('2/3'); // 2/3 cup
const tripled = multiply(sugar, 3);
console.log(tripled.toMixedNumber()); // '2' cups
// Boom—perfect for baking a triple batch!
Enter fullscreen mode Exit fullscreen mode

2. Bill Splitting: Fair Shares in Seconds

const { fraction, multiply, subtract } = require('fractionability');

const bill = 120;
const share1 = multiply(bill, fraction('3/5')); // 3:2 ratio
const share2 = subtract(bill, share1);
console.log(share1.toString(), share2.toString()); // '72', '48'
// Splitting $120 has never been this slick.
Enter fullscreen mode Exit fullscreen mode

3. Math Class Made Accessible

const { fraction } = require('fractionability');

const trickyFrac = fraction('13/5');
console.log(trickyFrac.toMixedNumber()); // '2 3/5'
console.log(trickyFrac.toMathML());
// '<math aria-label="2 and 3 over 5"><mn>2</mn><mfrac><mn>3</mn><mn>5</mn></mfrac></math>'
// Screen readers say: "two and three over five"—crystal clear!
Enter fullscreen mode Exit fullscreen mode

4. Chain It Like a Pro

const { fraction } = require('fractionability');

const result = fraction('3/4')
  .add('1/2')      // 3/4 + 1/2 = 5/4
  .multiply(2)     // 5/4 * 2 = 5/2
  .toMixedNumber(); // '2 1/2'
console.log(result);
// Chaining feels like magic, right?
Enter fullscreen mode Exit fullscreen mode

5. Expression Wizardry

const { evaluate } = require('fractionability');

const calc = evaluate('(2/3 + 1/4) * 3');
console.log(calc.toString()); // '11/4'
console.log(calc.toDecimal()); // 2.75
console.log(calc.toMixedNumber()); // '2 3/4'
// Complex math? Handled with style.
Enter fullscreen mode Exit fullscreen mode

Real-World Wow Factor

  • Cooking App: Scale 1/4 cup to serve 5 people? fraction('1/4').multiply(5).toString()'5/4'. Done.
  • Finance Dashboard: Calculate 7% interest on $500? multiply(500, '7%').toDecimal()35. Boom.
  • Construction Calc: Add 2 1/8 and 3 3/4 feet? add('2 1/8', '3 3/4').toMixedNumber()'5 7/8'. Nailed it.

Get It Now

Install it via npm:

npm install fractionability
Enter fullscreen mode Exit fullscreen mode

Or grab the shorthand alias:

npm install f13y@npm:fractionability
Enter fullscreen mode Exit fullscreen mode

Dive into the full docs and source on GitHub: github.com/waiz3ple/fractionability.

Why Devs Will Dig It

  • Lightweight: Tiny footprint, big impact.
  • TypeScript: Autocompletion heaven with .d.ts files.
  • Flexible: ESM, CJS, standalone, or chained—your call.
  • Inclusive: Accessibility baked in, not bolted on.

Let’s Make It Better Together

I’d love for you to try Fractionability (npmjs.com/package/fractionability) and tell me what you think! Got a killer use case? Spot a glitch?
Contributions are welcome—fork it, tweak it, send a PR. Let’s make math on the web awesome for everyone
.

What crazy project could you whip up with this? Drop your comment below—I’m all ears!
Happy coding,

follow me on: Github
follow me on: X

Top comments (0)