Headless is my current favorite. The API can be awkward in some places, but I think it still strikes a good balance between DX and flexibility. Hoping some more components will get added over time.
Reakit is really solid and feature-complete. However, it has an API that relies on spreading hooks into components. Beyond simple examples, it can get difficult figuring which specific set of props/options you need to override. Animations/transitions are a bit awkward as well.
| import { useCallback, useEffect, useReducer } from "react" | |
| type TransitionState = | |
| // the initial frame of opening, where the elements are in the DOM, | |
| // but the transition should start in the exit state | |
| // without this initial frame, the transition would start at the entered state | |
| | "opening-init" | |
| // elements are in DOM, CSS transition should start | |
| | "opening" |
| export default function useAxiosLazy() { | |
| const [response, setResponse] = useState(null) | |
| const [error, setError] = useState(null) | |
| const [isLoading, setIsLoading] = useState(false) | |
| const fetchData = useCallback(async (url, config) => { | |
| setIsLoading(true) | |
| try { | |
| const res = await axios(url, config) | |
| setResponse(res) |
| import type { ForwardedRef, ReactElement } from "react" | |
| import { forwardRef } from "react" | |
| /** Passes ref as a normal prop, makes `forwardRef`ing easier in some cases */ | |
| export function autoRef<Props extends { ref?: RefType }, RefType>(fc: { | |
| (props: Props): ReactElement | null | |
| displayName?: string | |
| }) { | |
| const AutoRef = (props: Props, ref: ForwardedRef<RefType>) => | |
| fc({ ...props, ref }) |
| /* | |
| packages: | |
| @typescript-eslint/eslint-plugin | |
| @typescript-eslint/parser | |
| eslint | |
| eslint-config-prettier | |
| eslint-plugin-react | |
| eslint-plugin-react-hooks | |
| eslint-plugin-jsx-a11y | |
| */ |
| import type { Ref } from "react" | |
| export default function combineRefs<T>( | |
| ...refs: Array<Ref<T> | null | undefined> | |
| ) { | |
| return (instance: T | null) => { | |
| for (const ref of refs) { | |
| if (typeof ref === "function") { | |
| ref(instance) | |
| } else if (ref) { |
| // @ts-check | |
| /** | |
| * @template T | |
| * @param {Iterable<T>} iterable the collection of items for which to make combinations of | |
| * @param {number} size the size of each combination | |
| * @return {Iterable<Set<T>>} an iterable of sets for each combination | |
| */ | |
| function* combinations(iterable, size) { | |
| if (size < 1) return |
| /** | |
| * Generates grid column classes like: | |
| * | |
| * - fluid-columns-fill-md | |
| * - fluid-columns-fill-sm | |
| * - ... | |
| * - fluid-columns-fit-md | |
| * - fluid-columns-fit-sm | |
| * - ... | |
| * |
| import { useEffect, useState } from "react" | |
| function useIntersection() { | |
| const [element, setElement] = useState<Element>() | |
| const [isIntersecting, setIntersecting] = useState(false) | |
| useEffect(() => { | |
| if (!element) return | |
| const observer = new IntersectionObserver(([entry]) => { |
