react-frequency v1.1.1

react-frequency

A simple React component and hook which emits a frequency generated thanks to the AudioContext API of JavaScript !

Live Demo

Installation

npm

npm install react-frequency

yarn

yarn add react-frequency

Usage

Hook

import React from 'react';
import { useFrequency } from 'react-frequency';

const App = () => {
  const { toggle, start, stop, playing } = useFrequency({
    hz: 174,
    type: "center",
    gain: 1,
    oscillator: "sine"
  })

  return (
    <div>
      <h1>playing: { playing ? 'true' : 'false' }</h1>
    
      <button onClick={toggle}>toggle</button>
      
      <button onClick={start}>start</button>
      <button onClick={stop}>stop</button>
    </div>
  )
};

The useFrequency hook return 3 functions and 1 boolean :

functions

• toggle: start and stop the frequency
• start: start the frequency
• stop: stop the frequency

boolean

• playing: reading state of the frequency

Component

import React from 'react';
import { Frequency } from 'react-frequency';

const App = () => (
  <Frequency
    hz={174}
    type="center"
    gain={1}
    oscillator="sine"
  />
);

The component does not return any elements and emits automatically the frequency.

Props

The only props required is hz.

A complete exemple is available in the Live Demo