tagzero / use-text-width

React hook to measure text width

useTextWidth

React hook to calculate text width

Install

npm install @tag0/use-text-width
# OR
yarn add @tag0/use-text-width

Usage

Run yarn start to view example on http://localhost:5000

There are 2 types of usages:

1. text & font

You can pass object having text (mandatory, string or string[] returns max one) and font (optional, CSS font string) properties to calculate width.

import { useTextWidth } from '@tag0/use-text-width';

const App = () => {
  const width = useTextWidth({ text: 'Hello world!', font: '20px Times' });

  return (
    <p>Hello world! text width: {width}px</p>
  );
};

2. ref

You can pass object having ref (mandatory, HTMLElement) property to calculate width.

import { useTextWidth } from '@tag0/use-text-width';

const App = () => {
  const ref = useRef();
  const width = useTextWidth({ ref });

  return (
    <p ref={ref} style={{ fontSize: '16pt', fontWeight: 'bold' }}>
      lorem ipsum! text width: {width}px
    </p>
  );
};

use-text-width's Issues

perf question

is it better to use single canvas context?

let canvasCtx: CanvasRenderingContext2D;

const getContext = () => {
  if (canvasCtx) {
    return canvasCtx;
  }
  
  return (canvasCtx = ...)
};

ref option is not working properly

Hello, I want to calc text width with ref option because I dont want to give static font and size to calculation. So I tried "ref" example in your library/examples but it logged NaN instead of actual width. Also same in my project. Because of your example has that issue, I dont need to provide any sandbox to you. You can check it from there.

ts-config target es6

there is a reason for config target as es6 ?
it make some computability issues

I need to build es5 target , is it possible to change the ts-config target?

Delayed Width Updates

Currently useEffect is used in useTextWidth which defers the update to the next render.

Using useMemo or useLayoutEffect should remove/reduce this delay so that there is less stuttering between renders.