jeremy-code

Switching from Radix UI to React Aria

Differences

No <ScrollArea>

Radix UI offers a custom <ScrollArea> implementation both as its own component and in some of its components (e.g. Select).

Per adobe/react-spectrum#7286, React Aria maintainers claim that due to accessibility issues and being unable to adhere to user system preferences, they don't intend on supporting a customizable scroll area. Per this tweet, it seems maintainer Devon Govett strongly dislikes overriding user preferences.

jeremy-code

import { Decimal } from "decimal.js";

const DEFAULT_MAX_ITERATIONS = 10;
const DEFAULT_TOLERANCE = 1e-10; // = 1/10_000_000_000

/**
 * Computes the continued fraction coefficients [a_0, a_1, ..., a_n] for a
 * **non-negative** finite number
 *
 * @see {@link https://en.wikipedia.org/wiki/Simple_continued_fraction}

jeremy-code

getImageDimensions TypeScript function using Image constructor and onLoad/onError. Much faster than Window.createImageBitmap. Uses imageOrientation = "from-image" to set width and height based on Exif data.

jeremy-code

Pdfimages seems to only extract images with transparency from PDFs by downloading it alongside the image mask. You can probably use something like ImageMagick if you only have a couple of images to convert it back into a PNG with transparency, but since there was a lot of images in my case, this is the script I used.

It uses pdf.js and sharp. Sharp was probably overkill but it makes the exporting part a bit cleaner.

jeremy-code

Examples of React Aria use in production

Repositories

• Argos - argos-ci/argos (MIT) (blog)
• Openstax - openstax/ui-components (MIT)
• Rocket.Chat RocketChat/fuselage (MIT)
• GoDaddy - godaddy/antares (MIT)
• Signal - signalapp/Signal-Desktop (GNU AGPLv3)
• British Columbia - bcgov/design-system (Apache-2.0)

jeremy-code

@custom-variant data-horizontal (&[data-orientation="horizontal"]);
@custom-variant data-vertical (&[data-orientation="vertical"]);

@custom-variant data-open (&[data-state="open"]);
@custom-variant data-closed (&[data-state="closed"]);
@custom-variant data-active (&[data-state="active"]);
@custom-variant data-inactive (&[data-state="inactive"]);
@custom-variant data-checked (&[data-state="checked"]);
@custom-variant data-unchecked (&[data-state="unchecked"]);

jeremy-code

If you're working with Files or Blob objects, you can't really do anything with them besides read their size and type unless you use one of its methods (e.g. bytes, arrayBuffer, slice, stream, text), all of which (besides stream) return a Promise.

For me, in React, if I'm expected to handle a Promise, my mind gravitates to either React Query or SWR. Something like this:

import { useQuery } from "@tanstack/react-query";

const Component = ({ file }: { file: File }) => {
  const { data: arrayBuffer } = useQuery({
    queryKey: ["Component", file],

jeremy-code

const data = new Uint8Array([1,0,1,0])
const blob = new Blob([data])
const newData = await blob.bytes() // [ 1, 0, 1, 0 ]
newData === data // false
data[1] = 1
await blob.bytes() // Uint8Array(4) [ 1, 0, 1, 0 ]

jeremy-code

import { useSyncExternalStore } from "react";

enum ReadyState {
  EMPTY,
  LOADING,
  DONE,
}

const useFileReader = () => {
  const fileReader = new FileReader();

jeremy-code

pre-processing JS library: /emsdk/upstream/emscripten/src/lib/libint53.js
pre-processing JS library: /emsdk/upstream/emscripten/src/lib/libcore.js
pre-processing JS library: /emsdk/upstream/emscripten/src/lib/libsigs.js
pre-processing JS library: /emsdk/upstream/emscripten/src/lib/libccall.js
pre-processing JS library: /emsdk/upstream/emscripten/src/lib/libaddfunction.js
pre-processing JS library: /emsdk/upstream/emscripten/src/lib/libgetvalue.js
pre-processing JS library: /emsdk/upstream/emscripten/src/lib/libmath.js
pre-processing JS library: /emsdk/upstream/emscripten/src/lib/libpath.js
pre-processing JS library: /emsdk/upstream/emscripten/src/lib/libstrings.js