Wondering what’s next for npm?Check out our public roadmap! »

    react-hooks-use-canvas-size
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    Use Canvas Size

    Often when using canvases it is important to know the dimensions of the actual box in the dom.

    This hook will give you the dimensions when supplied with a ref to the canvas.

    Installation

    yarn add react-hooks-use-canvas-size

    Usage

    Here is an example of finding the size of the canvas.

    import React, { useRef, useEffect } from 'react'
    import useCanvasSize from 'react-hooks-use-canvas-size'
    
    const BigOlSquare = () => {
      const canvasRef = useRef()
      const { width, height } = useCanvasSize(canvasRef)
    
      useEffect(() => {
        if (!canvasRef.current) return
    
        const ctx = canvasRef.current.getContext('2d')
    
        const squareWidth = Math.min(width, height)
        ctx.fillRect(0, 0, squareWidth, squareWidth)
      })
    
      return <canvas ref={canvasRef} />
    }

    Keywords

    none

    Install

    npm i react-hooks-use-canvas-size

    DownloadsWeekly Downloads

    0

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    4.26 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar