Small functions. Checked answers.

Hyrax is a TypeScript toolkit for the helpers every project ends up writing: range math, case conversion, a seeded random generator you can replay, and the DOM and React plumbing for listeners and clicks outside. No runtime dependencies.

$ npm install @gabreusi/hyrax

Get started API reference

1.0.0-rc.0 is a release candidate: not on npm yet.

value130

The hollow dot is value. The filled dot is what clamp keeps of it.

Computed live by the library

clamp(130, 0, 100)// => 100

ratio(130, 100)// => 1.3

remap(130, [0, 100], [0, 360])// => 468

lerp(0, 100, ratio(130, 100))// => 130

Nothing here is mocked. The answers are computed in your browser by the code these docs document.

Examples are tests

A stale example is worse than none. npm run docs:examples type-checks every example in the guides and in the TSDoc against the built package, resolved through its exports map, and runs the core ones. A trailing // => 10 is an assertion: the build fails the day clamp stops returning 10.

Run, answers asserted. The core guides and API pages. Each // => literal must equal what the code returns.
Type-checked, not run. /dom and /react, which need a browser or a component to mean anything.
Not checked. Skipped by hand, such as an example that is meant to throw.

How the examples are checked What a seed freezes

Answers computed by the source at load

clamp(15, 0, 10)// => 10

ratio(30, 60)// => 0.5

remap(5, [0, 10], [0, 100])// => 50

lerp(0, 10, 0.5)// => 5

toCamelCase("XMLHttpRequest")// => "xmlHttpRequest"

toKebabCase("Ação rápida")// => "ação-rápida"

coalesce(null, undefined, 0, "x")// => 0

new Random("level-1").int(1, 100)// => 25

Three entrypoints, split by where the code can run

Import only what your runtime has. The core never touches the DOM, /dom never touches React, and /react is a thin layer over /dom. Named exports only, no side effects on import: a bundler keeps exactly what you use.

import { clamp, Random } from "@gabreusi/hyrax";

Pure functions and three small classes. No DOM and no React in its types; the compiler enforces it.

Runs in: Anywhere: Node 20+, browsers, Deno, Bun
Costs about: 4.6 kB for all of it; clamp alone is 76 B

Read the core guide

Numbers: clamp lerp ratio remap
Strings: toCamelCase toKebabCase splitWords
Classes: Random StringBuilder Suspend
Helpers: coalesce fabricate toNumber alias

import { listen } from "@gabreusi/hyrax/dom";

Framework-free DOM helpers. Importing or calling them without a document returns the fallback.

Runs in: Browsers, and inert on a server
Costs about: 1.1 kB for all of it; listen alone is 85 B

Read the browser guide

Functions: listen onClickOutside toPixels getCSSVar

import { useClickOutside } from "@gabreusi/hyrax/react";

A thin layer over /dom, marked "use client". Not a React library.

Runs in: React 18 and 19, on the server too
Costs about: 1.5 kB for all of it; useForceUpdate is 96 B

Read the react guide

Hooks: useEventListener useClickOutside useInterval useForceUpdate
Components: Portal
Elements: hx

Pay for what you import

Every function is its own export and nothing runs on import, so one function costs what it weighs. Each import also has a size budget that fails the build when it grows.

Sizes and budgets in the design notes

Minified and Brotli-compressed, measured for 1.0.0-rc.0. React is a peer and is not counted.
You import	Scale	Costs about
`clamp`		76 B
`listen from /dom`		85 B
`useForceUpdate from /react`		96 B
`hx from /react`		630 B
`the whole of /dom`		1.1 kB
`the whole of /react`		1.5 kB
`Random`		3.2 kB
`the whole core`		4.6 kB