Hydra Synth hook for React

README.md

Hydra Synth hook for React

For Vite, you will have to define global.window, and this has to be defined before importing Hydra. You can do this by adding a define in the Vite config file:

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {
      window: {}
    },
  }
})

App.jsx

import { useHydra } from './useHydra'
import { useEffect } from 'react'

function App() {
  const [canvasRef, hydraLoaded] = useHydra()

  useEffect(() => {
    if (!hydraLoaded) return;

    // when it's loaded, run this script:
    noise().out();
  }, [hydraLoaded])

  return (
    <canvas style={{ width: '100vw', height: '100vh' }} ref={canvasRef} />
  )
}

export default App

useHydra.jsx

import { useEffect, useRef, useState } from "react";
import Hydra from "hydra-synth";

export function useHydra() {
  const canvasRef = useRef(null)
  const [loaded, setLoaded] = useState(false)

  useEffect(() => {
    const hydra = new Hydra({
      canvas: canvasRef.current,
      detectAudio: false,
    });

    window.hydra = hydra;
    setLoaded(true);

    return () => {
      hydra.hush();
    };
  }, [canvasRef]);

  return [canvasRef, loaded];
}