README

`react-frequency`

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

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.

Name	Default	Description
`hz`	`required` `number`	The frequency corresponds to the number of vibrations per second. The human ear hears values ranging from 20Hz to 20,000Hz
`type`	`not required` "center"	The type defines from which side the sound will come out. Values can be "left", "center" or "right"
`gain`	`not required` 1	The gain defines the ability to increase the strength of a signal. Value is float between 0 and 1
`oscillator`	`not required` "sine"	It specifies what shape of waveform the oscillator will output. Values can be "sine", "square", "sawtooth" or "triangle"

react-frequency

Usage no npm install needed!