mediabits-io/konva-elements

Custom canvas elements for react-konva as used in mediabits.io

konva-elements

Custom elements for react-konva as used in mediabits.io.

Waveform

Represents audio waveform. Requires pcm data for every frame.

Props:

• animated - will start from specified frame and animate every frame until all frames are over.
• frame - index of current frame.
• frames - pcm data: [number, number][][] - low-high x samples x frames.
• pattern - one of wave, pixel, bars, roundBars, line, curve - different styles of waveform
• other Konva.Shape props like fill, width, height, x, y`

<Waveform />

ProgressBar

Props:

• animated - will start from specified progress and animate every frame until max
• progress - number indicating progress until max - [0..1]
• max - limit for progress
• backgroundColor - color of area between progress and max
• fill - color of area between 0 and progress
• other Konva.Group element props

<ProgressBar progress={4} max={10} />