This package can be found in the NPM registry, install it using this command:

npm install use-videocard

yarn add use-videocard

import React from 'react'
import useVideoCard from 'use-videocard'

function App() {
  const graphics = useVideoCard()

  return (
    <div className="App">
      <p>Vendor: { graphics?.unmasked.vendor }</p>
      <p>GPU: { graphics?.unmasked.renderer }</p>
    </div>
  );
}

• gl: The WebGLRenderingContext which we want to extract the information from. NOTE: this field is OPTIONAL, the hook creates a canvas without appending it to the dom, but if you really want to specify the WebGLRenderingContext then set this field

interface GraphicsInformation {
    renderer: string,
    vendor: string,
    unmasked: {
        vendor: string,
        renderer: string
    }
}

• renderer: The masked renderer ID
• vendor: The masked vendor ID
• unmasked:
  • vendor: The unmasked vendor name. es: NVIDIA Corporation
  • renderer: The unmasked renderer name (the graphics card model and the pci version). es: Geforce GTX 1070/PCIe/SSE2