https://github.com/BRA1L0R/use-videocard

React hook to fetch the graphics card information of the client using canvas
https://github.com/BRA1L0R/use-videocard

javascript library react reacthooks reactjs typescript

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/BRA1L0R/use-videocard
• Owner: BRA1L0R
• License: mit
• Archived: true
• Created: 2020-06-27T20:03:24.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-06-24T10:27:28.000Z (over 2 years ago)
• Last Synced: 2024-04-25T22:02:24.510Z (10 months ago)
• Topics: javascript, library, react, reacthooks, reactjs, typescript
• Language: TypeScript
• Homepage:
• Size: 1.28 MB
• Stars: 10
• Watchers: 1
• Forks: 1
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-videocard`
• awesome-react-hooks-cn - `use-videocard`
• awesome-react-hooks - `use-videocard`
• awesome-react-hooks - `use-videocard`

README

        
![](assets/logo.svg)

# `use-videocard`

![https://www.npmjs.com/package/use-videocard](https://img.shields.io/npm/v/use-videocard?style=for-the-badge)

![](https://img.shields.io/github/languages/code-size/BRA1L0R/use-videocard?style=for-the-badge)

![https://github.com/BRA1L0R/use-videocard/blob/master/LICENSE.md](https://img.shields.io/github/license/BRA1L0R/use-videocard?style=for-the-badge)

![https://www.npmjs.com/package/use-videocard](https://img.shields.io/npm/dy/use-videocard?style=for-the-badge)

## 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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/sweet-night-sgsyw?fontsize=14&hidenavigation=1&theme=dark)

```tsx

import React from 'react'

import useVideoCard from 'use-videocard'

function App() {

  const graphics = useVideoCard()

  return (

    


      
Vendor: { graphics?.unmasked.vendor }

      
GPU: { graphics?.unmasked.renderer }

    

  );

}

```


## 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`

```ts

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