How to use effects from vanta js

EXAMPLE:

Here we have used vanta dots in the main background and vanta trunk in in the image background.

cdns required

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.trunk.min.js"></script>

for ease and reuseability, i have created a hooks:

import { useState, useEffect } from 'react';
//@ts-ignore
import DOTS from 'vanta/src/vanta.dots';

const useVantaDots = (selector: string) => {
  const [dots, setDots] = useState<any>(null);

  useEffect(() => {
    if (!dots) {
      setDots(
        DOTS({
          el: selector,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 300.0,
          minWidth: 200.0,
          scale: 1.0,
          scaleMobile: 1.0,
          color: 0x64ffda,
          color2: 0x204aff,
          backgroundColor: 0x0a192f,
          size: 2.8,
          spacing: 20,
          showLines: false,
        })
      );
    }

    return () => {
      if (dots) {
        dots.destroy();
        setDots(null);
      }
    };
  }, []);

  return dots;
};

export default useVantaDots;

import { useState, useEffect } from 'react';
//@ts-ignore
import TRUNK from 'vanta/src/vanta.trunk';

const useVantaTrunk = (selector: string) => {
  const [trunk, setTrunk] = useState<any>(null);

  useEffect(() => {
    if (!trunk) {
      setTrunk(
        TRUNK({
          el: selector,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 200.0,
          minWidth: 200.0,
          scale: 1.0,
          scaleMobile: 1.0,
          color: 0x64ffda,
          backgroundColor: 0x112240,
          spacing: 0,
          chaos: 4.0,
        })
      );
    }

    return () => {
      if (trunk) {
        trunk.destroy();
        setTrunk(null);
      }
    };
  }, []);
// }, [trunk, selector]);

  return trunk;
};

export default useVantaTrunk;

import useVantaDots from '../hooks/useVantaDots';
import useVantaTrunk from '../hooks/useVantaTrunk';  useVantaDots("#bg");
    useVantaTrunk("#photo");

  useVantaDots("#bg");
  useVantaTrunk("#photo");

//provide the id as input

<div className="flex items-center" id='bg'>
</div>



<div className='' id='photo'>
        <img className='' src="/assets/bhavikProfile.avif" alt="Bhavik Bhuva" />
        </div>