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
pre-processing JS library: /emsdk/upstream/emscripten/src/lib/libhtml5.js

jeremy-code

I needed to add a border to the arrow in the Popover component from radix-ui.

The HTML that is generated looks something like this:

<svg style="display: block;" width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none">
  <polygon points="0,0 30,0 15,10"></polygon>
</svg>

jeremy-code

List of large codebases using Radix Primitives with free licenses. Mostly taken from Case Studies. Leaving here for inspiration later. Let me know if you know of any others.

• nodejs/nodejs.org (MIT)
  • Tooltip
  • Select
  • Modal
  • Separator
  • Tabs
• [Language Dropdown](https://github.com/nodejs/nodejs.org/blob/master/packages/ui-components/src/Common

jeremy-code

@import "tailwindcss";

@theme inline {
  --color-contrast-1: light-dark(var(--color-gray-50), var(--color-gray-950)); /* background */
  --color-contrast-2: light-dark(var(--color-gray-100), var(--color-gray-900)); /* subtle */
  --color-contrast-3: light-dark(var(--color-gray-200), var(--color-gray-800)); /* muted */
  --color-contrast-4: light-dark(var(--color-gray-300), var(--color-gray-700));
  --color-contrast-5: light-dark(var(--color-gray-400), var(--color-gray-600)); /* subtle foreground */
  --color-contrast-6: light-dark(var(--color-gray-500), var(--color-gray-500)); 
  --color-contrast-7: light-dark(var(--color-gray-600), var(--color-gray-400)); /* muted foreground */

jeremy-code

Suppose you are using lovasoa/dezoomify-rs to extract an image.

Easiest way would be to use the dezoomify extension (lovasoa/dezoomify-extension), zooming in, clicking on the extension icon, which will pop up the dezoomify website with the url pre-filled.

Alternatively, inspect element, network tab, select XHR or Fetch/XHR and look for a JSON fetch request to a info.json of something like this:

{
  "@context": "http://iiif.io/api/image/2/context.json",
  "@id": "https://numerabilis.u-paris.fr/iiif/2/bibnum:90146x1805x09:0097",