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