How to use in React.js/webpack

[wrightwriter]

1. Place

<script  src="https://cdn.jsdelivr.net/gh/tengbao/vanta/vendor/three.r92.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tengbao/vanta/dist/vanta.fog.min.js"></script>

in index.html
Replace the ending of the filename with your desired effect.
2. Add a componentWillMount() listener and put in it

window.VANTA.FOG({
      el: "#dummy",
    });

[tengbao]

Thanks for the tip! I'll add this to the readme.

[M4lF3s]

As a quick note: You can also use this with Function-Components in React!

import vanta from './vanta.net.min.js';
import {useRef, useLayoutEffect} from 'react'

export default (props) => {
    const element = useRef<HTMLDivElement>()
    useLayoutEffect(() => {
        vanta({
            el: element.current
        })
    })
    return (
        <>
            <script src="/static/three.r92.min.js"></script>
            <div ref={element}></div>
        </>
    )
}