react-pulser

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:

Options prop

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