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 torelativeor it may not display. See the Props section below for more information on how to use custom styling.
| 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. |
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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent