📈 react-ecg-drawer

A 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.

✨ Features

• 🩺 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)

📦 Installation

npm install react-ecg-drawer
# or
yarn add react-ecg-drawer
# or
pnpm add react-ecg-drawer

🚀 Quick Start

import { ECGDrawer } from "react-ecg-drawer";

export default function Example() {
  const ecg = [20, 20, 0, -20, 40, 100, 300, ...]; // your ECG points

  return (
    <ECGDrawer
      points={ecg}
      sampleRate={250}
      secondsPerRow={4}
      rowHeight={120}
    />
  );
}

📐 Props

| Prop | Type | Default | Description | | ----------------- | ------------------ | ------------- | ---------------------------------------- | | points | number[] | required | ECG waveform sample points | | sampleRate | number | 250 | Samples per second (Hz) | | secondsPerRow | number | 2.5 | Number of seconds displayed per ECG row | | rowHeight | number | 100 | Pixel height of each row | | yRange | [number, number] | [-1.5, 1.5] | Vertical amplitude range (mV-like units) | | gridColor | string | #e88 | Light grid lines (1 mm) | | boldGridColor | string | #d44 | Bold grid lines (5 mm) | | strokeColor | string | #000 | Color of ECG waveform | | strokeWidth | number | 1.2 | Waveform line thickness | | responsive | boolean | true | Auto-fit ECG to container width |

🖼 Screenshots

🛠 Development

npm install
npm run build
npm run dev

📜 License

This project is licensed under the MIT License.
See the LICENSE file for details.

⭐ Acknowledgements

This project was created to provide an easy, accurate way to visualize ECG waveforms in React applications.