A responsive multi-row ECG waveform renderer for React (SVG-based, medical-style paper grid).
npm install react-ecg-drawerA responsive multi-row ECG (electrocardiogram) waveform renderer for React.
Built with SVG, medical-style red paper grid, dynamic scaling, and multi-row wrapping — perfect for healthcare apps, monitoring dashboards, and research tools.
- 🩺 Multi-row ECG strips (configurable seconds per row)
- 📏 Medical ECG paper grid (1 mm & 5 mm spacing)
- 📡 Supports any sample rate (default 250 Hz)
- 📉 Automatic baseline centering and amplitude scaling
- ⚛️ TypeScript support included
- 📦 Zero runtime dependencies (besides React)
``bash`
npm install react-ecg-draweror
yarn add react-ecg-draweror
pnpm add react-ecg-drawer
`tsx
import { ECGDrawer } from "react-ecg-drawer";
export default function Example() {
const ecg = [20, 20, 0, -20, 40, 100, 300, ...]; // your ECG points
return (
sampleRate={250}
secondsPerRow={4}
rowHeight={120}
/>
);
}
`
| Prop | Type | Default | Description |
| ----------------- | ------------------ | ------------- | ---------------------------------------- |
| points | number[] | required | ECG waveform sample points |number
| sampleRate | | 250 | Samples per second (Hz) |number
| secondsPerRow | | 2.5 | Number of seconds displayed per ECG row |number
| rowHeight | | 100 | Pixel height of each row |[number, number]
| yRange | | [-1.5, 1.5] | Vertical amplitude range (mV-like units) |string
| gridColor | | #e88 | Light grid lines (1 mm) |string
| boldGridColor | | #d44 | Bold grid lines (5 mm) |string
| strokeColor | | #000 | Color of ECG waveform |number
| strokeWidth | | 1.2 | Waveform line thickness |boolean
| responsive | | true | Auto-fit ECG to container width |
`bash``
npm install
npm run build
npm run dev
This project is licensed under the MIT License.
See the LICENSE file for details.
This project was created to provide an easy, accurate way to visualize ECG waveforms in React applications.