Rate Limit Meter
A quota with its reset time given equal weight. "9,800 of 10,000" is alarming; "resets in 40 seconds" makes it fine — showing the first without the second sends people to build a cache they do not need.
src/components/ui/rate-limit-meter.tsxAbout
From the component's own source, where it was written.
A quota and the window it resets in.
The reset time is as prominent as the count. "9,800 of 10,000" is alarming and "resets in 40 seconds" makes it fine; showing the first without the second sends people to write a caching layer they do not need.
Burn rate is derived from what has been consumed against how much of the window has elapsed, and the projection says whether the quota runs out before the reset. That is the question — not the current number.
Remaining is shown, not used. Both are on screen, but the headline is the one a caller acts on, and inverting it costs a subtraction every glance.
Install
npx astralyx-ui add rate-limit-meter
Usage
import { RateLimitMeter } from '@/components/ui/rate-limit-meter'
<RateLimitMeter limit={10000} remaining={1840} resetAt={reset} windowSeconds={3600} />Composer
Change the props and the source below follows.
1,840/ 10,000 remaining
<RateLimitMeter
limit={10000}
remaining={1840}
resetAt={reset}
windowSeconds={3600}
/>Examples
Room to spare, and nearly out
<RateLimitMeter limit={5_000} remaining={4_120} resetAt={resetsAt} />
<RateLimitMeter limit={5_000} remaining={80} resetAt={resetsAt} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
RateLimitMeter
A quota and the window it resets in.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| limit | number | required | — |
| remaining | number | required | Not used. Both are on screen, but remaining is what a caller acts on — inverting it costs a subtraction every glance. |
| resetAt | Date | — | Given equal prominence to the count. |
| windowSeconds | number | — | Enables the burn-rate projection: whether the quota runs out before the reset. Drop remaining low with a long window left to see it fire. |
| now | Date | — | — |
| label | ReactNode | 'Rate limit' | — |
| remainingLabel | ReactNode | 'remaining' | — |
| resetsLabel | ReactNode | 'resets' | — |
| exhaustedLabel | ReactNode | 'Quota exhausted' | — |
| projectionLabel | ReactNode | 'On the current rate this window runs out before it resets.' | Warning when the projection says the quota will not last. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| meter | role="meter" | With a window-elapsed marker for comparing spend against time. |