react-waterfall-plot

A customizable, high-performance React component for rendering real-time waterfall visualizations of frequency data.

Features

• Real-time waveform and spectrum visualization
• Configurable frequency range (centerHz, spanHz)
• Adjustable display parameters (size, rows, color maps)
• TypeScript ready with built-in definitions

Installation

npm install react-waterfall-plot

Peer Dependencies

• React 19+

Ensure these are installed in your project.

Usage

import Waterfall from "react-waterfall-plot"
import { useEffect, useState } from "react"

function App() {
  let [data, setData] = useState(new Array(1024).fill(0))

  useEffect(() => {
    const timer = setInterval(() => {
      setData(data.map(() => Math.random() * -100))
    }, 100)
    return () => clearInterval(timer)
  })

  return (
    <div>
      <Waterfall
        data={data}
        centerHz={1000}
        spanHz={2000}
        spectrumPercent={40}
      />
    </div>
  )
}

export default App

Props

| Prop | Type | Default | Description | |--------------------|------------|------------------|-----------------------------------------------------------------------| | canvasId | string | waterfall-canvas | Unique canvas element ID | | data | number[] | — | FFT bin data to render each frame | | centerHz | number | — | Center frequency in Hz | | spanHz | number | — | Frequency span in Hz | | spectrumPercent | number | 20 | Percentage of canvas height devoted to the spectrum plot | | minDb | number | -100 | Minimum dB for color mapping | | maxDb | number | 0 | Maximum dB for color mapping |

Contributing

Contributions welcome! Please open an issue or submit a PR.

License

MIT