BRA1L0R/use-videocard

React hook to fetch the graphics card information of the client using canvas

use-videocard

Installation

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

With npm:

npm install use-videocard

With yarn:

yarn add use-videocard

Example

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>
  );
}

API

useVideoCard (gl?: WebGLRenderingContext): GraphicsInformation

• 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

GraphicsInformation

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

Contributors