components / break-overlay
break-overlay.
full-screen rest overlay with a large live countdown and resume / extend / skip actions. traps focus, locks scroll, and only escapes when you let it.
installation
bunx @justin06lee/chrome@latest add break-overlayprops
| name | type | default | description |
|---|---|---|---|
| open * | boolean | - | whether the rest screen is showing. |
| endsAt | number | Date | - | absolute end of the break; wins over seconds. use it when the break is persisted and must survive a remount at the right offset. |
| seconds | number | - | break length in seconds, counted from the moment it opens. |
| title | string | 'break time' | heading above the countdown. |
| message | ReactNode | - | optional line under the countdown — what to actually do with the break. |
| label | string | 'break' | small mono label above the heading. |
| onResume | () => void | - | user ended the break early. also fires on escape when dismissible. omit to hide the button. |
| onSkip | () => void | - | user skipped the break outright. omit to hide the button. |
| onExtend | (seconds: number) => void | - | user extended the break; receives the added seconds. the overlay moves its own deadline too. omit to hide the button. |
| extendBy | number | 300 | how much extend adds, in seconds. |
| onComplete | () => void | - | fires once, when the countdown reaches zero on its own. |
| dismissible | boolean | false | allow escape to close the overlay, resolving as resume. off by default — a forced break should be mildly inconvenient to dismiss. |
| anchor | 'viewport' | 'container' | 'viewport' | 'viewport' covers the window and locks body scroll; 'container' covers the nearest positioned ancestor instead. |
| className | string | - | extra classes for the overlay. |