midcut

A <1kb React component that accurately middle-truncates monospaced text. Uses CSS round() and container queries (no JS measurement).

Install

npm i -S midcut
pnpm add midcut
bun add midcut

Usage

import { Midcut } from "midcut";

function App() {
  return <Midcut prefix="0x" value="0x1234567890abcdef1234567890abcdef12345678" />;
}

Important: only use with a monospace font.

Props

| Prop | Type | Default | Description | | ---------- | ------------------ | --------- | ------------------------------------------------------- | | value | string | "" | The string to truncate | | prefix | string | "" | A prefix that is always visible (e.g. "0x") | | min | number | 1 | Minimum characters visible on each side of the ellipsis | | ellipsis | string | "…" | The ellipsis character(s) | | align | "start" \| "end" | "start" | Alignment of the truncated string within its container |

How it works

1. The string is split into two halves displayed as inline flex items
2. A CSS container query activates truncation when the container is narrower than the full string
3. round(down, ..., 2ch) snaps the truncatable width to character boundaries so characters are never partially clipped
4. The end half uses justify-content: flex-end to truncate from the start

Development

bun install
bun dev

License

MIT