jeffcoh23 / react-pulser

[React Component] Frequency graph animation to display during audio playbacks

React-Pulser

Description

React component which displays an animated frequency graph. Adds a nice touch to audio playback UI's.

• npm install --save react-pulser

import React, { Component } from 'react';
import Pulser from "react-pulser";
import "./index.css";

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            playing: false
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e) {
        this.setState(prevState => {
            return {
                playing: !prevState.playing
            }
        })
    }
    render() {
        let { playing } = this.state
        return (
            <div className="app-wrapper">
                <button onClick={this.handleClick} >Play/Pause</button>
                <Pulser animate={playing} ></Pulser>
            </div>
        )
    }
}

• NOTE: The <Pulser> component fills its parent container by default. Make sure it has a specified height and has position set to relative or it may not display. See the Props section below for more information on how to use custom styling.

---

Props:

Name	Type	Default	Description
animate	boolean	false	Toggles bar graph animation.
pulserStyles	object	{}	Style object for the outer container. Use this if you want to override the default CSS styling. You can also refer to the selector .pulser-wrapper in CSS.
barStyles	object	{}	Style object for individual bars. Use this if you want to override the default CSS styling. You can also refer to the selector .bar in CSS.
options	object	{}	The options prop is an object which contains several extra configuration settings. See below.

Options prop

let options = {
    barQuant: 7,
    minHeight: 15,
    changeRate: 5
}
<Pulser animate options={options}>

Name	Type	Default	Description
barQuant	number	5	Specifies number of bars to display.
minHeight	number	30	Specifies the minimum initial height of each bar in terms of the percentage of its parent container. Must be between 0 and 30.
changeRate	number	15	Specifies the number in milliseconds for how fast to animate.