Customizable, lightweight SVG sleep-stage charts (Hypnograms) for React and TypeScript.
- SVG rendering with configurable stages, spacing, rounded corners, and vertical gradient fills.
- Custom tooltip content, positioning, highlights, and callbacks.
- React and TypeScript; no runtime dependency beyond React.
npm install react-hypnogramimport { Hypnogram } from 'react-hypnogram';
import type { HypnogramSegment } from 'react-hypnogram';
const data: HypnogramSegment[] = [
{ id: '1', stage: 'awake', start: '2026-09-09T22:14:00+08:00', end: '2026-09-09T22:32:00+08:00' },
{ id: '2', stage: 'light', start: '2026-09-09T22:32:00+08:00', end: '2026-09-09T23:10:00+08:00' },
{ id: '3', stage: 'deep', start: '2026-09-09T23:10:00+08:00', end: '2026-09-10T00:28:00+08:00' },
{ id: '4', stage: 'rem', start: '2026-09-10T00:28:00+08:00', end: '2026-09-10T01:10:00+08:00' },
];
export function App() {
return (
<Hypnogram
data={data}
time={{ timeZone: 'Asia/Shanghai' }}
radius={12}
stageHeight={40}
barThickness={24}
onSegmentClick={segment => console.log('Clicked segment:', segment.id)}
/>
);
}No external CSS required. The component adopts container width automatically.
# Install dependencies
npm install
# Start playground development server
npm run dev
# Run tests and typecheck
npm test
npm run typecheck
# Full verification (types, tests, package, size, playground)
npm run check