/use-videocard

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

Primary LanguageTypeScriptMIT LicenseMIT

use-videocard

https://www.npmjs.com/package/use-videocard https://github.com/BRA1L0R/use-videocard/blob/master/LICENSE.md https://www.npmjs.com/package/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

Edit sweet-night-sgsyw

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