Component stores

Dear readers,

I’m excited to share with you the latest updates on Ariakit.

As some of you may know, earlier this year, Revue was shut down. I migrated this newsletter to Substack. Please do let me know if you encounter any issues.

In recent months, I posted a Request for Comments (RFC) on the Ariakit repository, proposing to replace state hooks like useComboboxState with component stores:

import {
  useComboboxStore,
  Combobox,
  ComboboxPopover
} from "@ariakit/react"

function MyCombobox() {
  const combobox = useComboboxStore()
  return (
    <>
      <Combobox store={combobox} />
      <ComboboxPopover store={combobox}>
        ...
      </ComboboxPopover>
    </>
  )
}

This approach has numerous advantages over the old one, such as the ability to reuse state logic outside of React, prevent unnecessary re-renders, and better integration with React’s useEffect.

I’m thrilled to announce that this feature has finally landed. You can learn more about it on the RFC or the dedicated Component stores page on ariakit.org.

New package names

As part of this update, we’ve also changed the npm packages to include the @ariakit scope. You can expect to see new packages, such as @ariakit/dom and @ariakit/vue, in the future.

Furthermore, we’ve changed the versioning system from v2.0.0-beta.x to v0.x.x. This change ensures that projects that don’t set the exact version of the dependency on package.json won’t experience unnecessary breakages due to breaking changes released between beta versions.

More Ariakit

• Ariakit has a new logo ✨

• Test files on Ariakit are now framework-agnostic

• Test Ariakit examples on Next.js directly from the site

• Contribute to Ariakit directly from the browser using Gitpod

• Building a multi-level sliding menu with Ariakit and CSS Scroll Snap

• Ariakit has workaround

• Fixing bad UX with Ariakit Hovercard

• Use the browser’s built-in search to focus on ComboboxItem

• Improved support for links on Ariakit comboboxes

• The unconventional navigation on ariakit.org

• Improved support for auto-select and inline auto-completion on Combobox

• API ideas for a vanilla JS version of Ariakit

More Dev

• Detect DOM element direction (ltr/rtl)

• Performance: Map vs. plain objects

• Easy way to detect if the focus is leaving an element

• Using the hover media query to improve touch UX

• The problem with the autoFocus prop on React

• The best fuzzy-search library

• Using Unicode regular expressions to match any language

• Render diagrams on GitHub using markdown (my most popular tweet 😱)

• Render maps on GitHub using markdown

• Naming groups in regular expressions for better readability

• Always underline links within paragraphs (I wish I could do this on Substack)

• Why you should use interface instead of type to document APIs in TypeScript