Installation
What React Holdbar needs, and how to add it to a project.
Requirements
| requirement | |
|---|---|
react | ^19.0.0 |
react-dom | ^19.0.0 |
node | >=18 |
Install
bash
npm install react-holdbarStylesheet
The components don't import any CSS. Import the stylesheet once, in your entry stylesheet:
css
@import "react-holdbar/holdbar.css";Mount the bar
Render the bar once, near the root, and mount a Hold while something is loading. That's the whole setup:
tsx
import { Holdbar } from "react-holdbar";
<Holdbar className="text-primary">
{isLoading && <Holdbar.Hold />}
</Holdbar>Without React
The stylesheet works on its own too. The markup is the same thing the components render: one element with data-holdbar, and an element with data-holdbar-hold for as long as something is loading. Server-rendered HTML, Astro, htmx, anything that can put an element on the page. What you lose is the timing, because it needs the component: minVisible, and the finish that always plays to the end at full colour.
html
<div data-holdbar aria-hidden="true"></div>
<span data-holdbar-hold hidden></span>