# react-pulser

> Frequency graph emulator to display during audio playbacks

Latest version **1.0.9** (published 2018-02-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-pulser
pnpm add react-pulser
yarn add react-pulser
bun add react-pulser
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2018-02-03 |
| First published | 2017-08-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ben Turner |
| Maintainers | bbgrabbag |
| Keywords | audio interface UI, frequency graph, vector graph, emulator |

## Links

- npm: https://www.npmjs.com/package/react-pulser
- Repository: https://github.com/bbgrabbag/react-pulser
- Homepage: https://github.com/bbgrabbag/react-pulser#readme
- Issues: https://github.com/bbgrabbag/react-pulser/issues
- npm.io page: https://npm.io/package/react-pulser

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^15.5.4
- [webpack](https://npm.io/package/webpack.md) ^2.6.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2018-02-03
- 1.0.8 — 2018-01-31
- 1.0.7 — 2018-01-31
- 1.0.6 — 2018-01-31
- 1.0.5 — 2018-01-31
- 1.0.4 — 2018-01-30
- 1.0.3 — 2018-01-30
- 1.0.2 — 2018-01-30
- 1.0.1 — 2018-01-30
- 0.0.2 — 2018-01-29
- 0.0.1 — 2018-01-29
- 1.0.0 — 2017-08-22

## README

### 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`

```javascript
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>
        )
    }
}
```
![react-pulser demo](demo.png "demo screenshot of react-pulser")
- 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
```javascript
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.

---
_Source: https://npm.io/package/react-pulser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._