@chenglou/pretext vs react-hook-form

pkgdocs/compare/@chenglou/pretext vs react-hook-form

Comparing

npm

@chenglou/pretext

Fast multiline text measurement and layout without DOM reflow

0/ wk

v0.0.3

npm

react-hook-form

Performant, flexible and extensible forms library for React Hooks

40.0M/ wk

v7.72.0

Metric	@chenglou/pretext	react-hook-form
Ecosystem	npm	npm
Difficulty	Intermediate	Beginner ✓
Weekly downloads	0	40.0M↑
Latest version	v0.0.3	v7.72.0
Recipes	5↑	1

When to use each

@chenglou/pretext

Use pretext when you need to know text dimensions before rendering — virtualised scrolling lists where you must know item heights upfront, text flowing around images or arbitrary obstacles, dynamic subtitle/caption positioning, detecting content overflow at build time, or any animation that requires text metrics on every frame.

react-hook-form

Use React Hook Form for any form with more than 3-4 fields, especially if they have validation logic. It integrates well with Zod (via @hookform/resolvers/zod) for schema-based validation, giving you type-safe forms with runtime validation in a few lines.

When to skip each

@chenglou/pretext

Pretext only measures plain text — it cannot handle HTML markup, inline images, or mixed rich content. For simple cases where you measure a single element once on mount, the browser's built-in ResizeObserver or getBoundingClientRect is simpler and sufficient. Pretext's two-phase API adds conceptual overhead that is only justified when measurements are frequent or happen before render.

react-hook-form

For very simple single-field forms (a search box, a newsletter signup), useState is less code. For highly dynamic forms where fields are added/removed programmatically, the useFieldArray API works but adds complexity — evaluate Formik for that use case.

Sample recipes

@chenglou/pretext

Install @chenglou/pretext
Calculate text height before rendering
Get per-line text and widths
Flow text around an obstacle

+1 more

react-hook-form

Install react-hook-form