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

``bash npm install react-waterfall-plot`

`Peer Dependencies`

- React 19+

Ensure these are installed in your project.

`Usage`

`tsx 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 (


              data={data}
        centerHz={1000}
        spanHz={2000}
        spectrumPercent={40}
      />

)
}

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

Usage

tsx
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 (


              data={data}
        centerHz={1000}
        spanHz={2000}
        spectrumPercent={40}
      />

)
}

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 |