reakit-utils
Advanced tools
The reakit-utils package provides a collection of utility functions that are useful for building accessible and reusable React components. These utilities help with DOM manipulation, event handling, and other common tasks in React development.
DOM Utilities
DOM utilities help with common DOM manipulation tasks. For example, `isVisibleInViewport` checks if an element is visible within the viewport.
const element = document.getElementById('myElement');
const isVisible = isVisibleInViewport(element);Event Utilities
Event utilities simplify event handling. The `addEventListener` function, for instance, adds an event listener to a DOM element.
import { addEventListener } from 'reakit-utils';
const handleClick = () => console.log('Element clicked');
addEventListener(document.getElementById('myElement'), 'click', handleClick);Array Utilities
Array utilities provide functions for common array operations. `removeItemFromArray` removes a specified item from an array.
import { removeItemFromArray } from 'reakit-utils';
const array = [1, 2, 3, 4];
const newArray = removeItemFromArray(array, 3); // [1, 2, 4]String Utilities
String utilities offer functions for string manipulation. The `capitalize` function capitalizes the first letter of a string.
import { capitalize } from 'reakit-utils';
const text = 'hello world';
const capitalizedText = capitalize(text); // 'Hello world'Lodash is a popular utility library that provides a wide range of functions for common programming tasks, including array manipulation, object manipulation, and more. It is more comprehensive and widely used compared to reakit-utils.
Ramda is a functional programming library for JavaScript that provides utility functions for working with arrays, objects, and other data types. It emphasizes immutability and pure functions, making it a good choice for functional programming paradigms.
Date-fns is a utility library for working with dates in JavaScript. It provides a comprehensive set of functions for date manipulation and formatting. While it focuses specifically on dates, it offers more specialized functionality compared to reakit-utils.
This is experimental and may have breaking changes in minor versions.
npm:
npm i reakit-utils
Yarn:
yarn add reakit-utils
Receives a setState argument and calls it with currentValue if it's a
function. Otherwise return the argument as the new value.
argument React.SetStateAction<T>currentValue Timport { applyState } from "reakit-utils";
applyState((value) => value + 1, 1); // 2
applyState(2, 1); // 2
It's true if it is running in a browser environment or false if it is not (SSR).
import { canUseDOM } from "reakit-utils";
const title = canUseDOM ? document.title : "";
Ponyfill for Element.prototype.closest
import { closest } from "reakit-utils";
closest(document.getElementById("id"), "div");
// same as
document.getElementById("id").closest("div");
Similar to Element.prototype.contains, but a little bit faster when
element is the same as child.
import { contains } from "reakit-utils";
contains(document.getElementById("parent"), document.getElementById("child"));
Returns boolean
Creates an Event in a way that also works on IE 11.
element HTMLElementtype stringeventInit EventInit?import { createEvent } from "reakit-utils";
const el = document.getElementById("id");
el.dispatchEvent(createEvent(el, "blur", { bubbles: false }));
Returns Event
Returns an onKeyDown handler to be passed to a component.
options Options (optional, default {})
options.keyMapoptions.onKeyoptions.stopPropagationoptions.onKeyDownoptions.shouldKeyDown (optional, default ()=>true)options.preventDefault (optional, default true)Returns React.KeyboardEventHandler
Checks if a given string exists in the user agent string.
string stringEnsures element will receive focus if it's not already.
element HTMLElement$1 EnsureFocusOptions (optional, default {})
$1.preventScroll$1.isActive (optional, default hasFocus)import { ensureFocus } from "reakit-utils";
ensureFocus(document.activeElement); // does nothing
const element = document.querySelector("input");
ensureFocus(element); // focuses element
ensureFocus(element, { preventScroll: true }); // focuses element preventing scroll jump
function isActive(el) {
return el.dataset.active === "true";
}
ensureFocus(document.querySelector("[data-active='true']"), { isActive }); // does nothing
Returns number requestAnimationFrame call ID so it can be passed to cancelAnimationFrame if needed.
Creates and dispatches a blur event in a way that also works on IE 11.
element HTMLElementeventInit FocusEventInit?import { fireBlurEvent } from "reakit-utils";
fireBlurEvent(document.getElementById("id"));
Creates and dispatches Event in a way that also works on IE 11.
element HTMLElementtype stringeventInit EventInitimport { fireEvent } from "reakit-utils";
fireEvent(document.getElementById("id"), "blur", {
bubbles: true,
cancelable: true,
});
Creates and dispatches KeyboardEvent in a way that also works on IE 11.
element HTMLElementtype stringeventInit KeyboardEventInitimport { fireKeyboardEvent } from "reakit-utils";
fireKeyboardEvent(document.getElementById("id"), "keydown", {
key: "ArrowDown",
shiftKey: true,
});
Transforms an array with multiple levels into a flattened one.
array Array<T>import { flatten } from "reakit-utils";
flatten([0, 1, [2, [3, 4], 5], 6]);
// => [0, 1, 2, 3, 4, 5, 6]
Returns element.ownerDocument.activeElement.
Returns element.ownerDocument || document.
Returns Document
Cross-browser method that returns the next active element (the element that is receiving focus) after a blur event is dispatched. It receives the blur event object as the argument.
event (React.FocusEvent | FocusEvent)import { getNextActiveElementOnBlur } from "reakit-utils";
const element = document.getElementById("id");
element.addEventListener("blur", (event) => {
const nextActiveElement = getNextActiveElementOnBlur(event);
});
Returns element.ownerDocument.defaultView || window.
element Element?Returns Window
Checks if element has focus. Elements that are referenced by
aria-activedescendant are also considered.
element Elementimport { hasFocus } from "reakit-utils";
hasFocus(document.getElementById("id"));
Returns boolean
Checks if element has focus within. Elements that are referenced by
aria-activedescendant are also considered.
element Elementimport { hasFocusWithin } from "reakit-utils";
hasFocusWithin(document.getElementById("id"));
Returns boolean
Checks whether element is a native HTML button element.
element Elementimport { isButton } from "reakit-utils";
isButton(document.querySelector("button")); // true
isButton(document.querySelector("input[type='button']")); // true
isButton(document.querySelector("div")); // false
isButton(document.querySelector("input[type='text']")); // false
isButton(document.querySelector("div[role='button']")); // false
Returns boolean
Checks whether arg is empty or not.
arg anyimport { isEmpty } from "reakit-utils";
isEmpty([]); // true
isEmpty(["a"]); // false
isEmpty({}); // true
isEmpty({ a: "a" }); // false
isEmpty(); // true
isEmpty(null); // true
isEmpty(undefined); // true
isEmpty(""); // true
Returns boolean
Checks whether arg is an integer or not.
arg anyimport { isInteger } from "reakit-utils";
isInteger(1); // true
isInteger(1.5); // false
isInteger("1"); // true
isInteger("1.5"); // false
Returns boolean
Checks whether arg is an object or not.
arg anyReturns boolean
Checks whether arg is a plain object or not.
arg anyReturns boolean
Returns true if event has been fired within a React Portal element.
Returns boolean
Checks whether arg is a promise or not.
arg (T | Promise<T>)Returns boolean
Returns true if event.target and event.currentTarget are the same.
event React.SyntheticEventReturns boolean
Check whether the given element is a text field, where text field is defined by the ability to select within the input, or that it is contenteditable.
element HTMLElementimport { isTextField } from "reakit-utils";
isTextField(document.querySelector("div")); // false
isTextField(document.querySelector("input")); // true
isTextField(document.querySelector("input[type='button']")); // false
isTextField(document.querySelector("textarea")); // true
isTextField(document.querySelector("div[contenteditable='true']")); // true
Returns boolean
Ponyfill for Element.prototype.matches
Returns boolean
This higher order functions take propsAreEqual function and
returns a new function which normalizes the props.
Normalizing in our case is making sure the propsAreEqual works with
both version 1 (object spreading) and version 2 (state object) state passing.
To achieve this, the returned function in case of a state object
will spread the state object in both prev and `next props.
Other case it just returns the function as is which makes sure that we are still backward compatible
propsAreEqual function (prev: O, next: O): booleanReturns function (prev: PropsWithAs<O, T>, next: PropsWithAs<O, T>): boolean
Omits specific keys from an object.
object Tpaths (ReadonlyArray<K> | Array<K>)import { omit } from "reakit-utils";
omit({ a: "a", b: "b" }, ["a"]); // { b: "b" }
Returns Omit<T, K>
Picks specific keys from an object.
object Tpaths (ReadonlyArray<K> | Array<K>)import { pick } from "reakit-utils";
pick({ a: "a", b: "b" }, ["a"]); // { a: "a" }
Immutably removes an index from an array.
array Tindex numberimport { removeIndexFromArray } from "reakit-utils";
removeIndexFromArray(["a", "b", "c"], 1); // ["a", "c"]
Returns Array A new array without the item in the passed index.
Immutably removes an item from an array.
array Aitem anyimport { removeItemFromArray } from "reakit-utils";
removeItemFromArray(["a", "b", "c"], "b"); // ["a", "c"]
// This only works by reference
const obj = {};
removeItemFromArray([obj], {}); // [obj]
removeItemFromArray([obj], obj); // []
Returns Array A new array without the passed item.
Compares two objects.
objA Record<any, any>?objB Record<any, any>?import { shallowEqual } from "reakit-utils";
shallowEqual({ a: "a" }, {}); // false
shallowEqual({ a: "a" }, { b: "b" }); // false
shallowEqual({ a: "a" }, { a: "a" }); // true
shallowEqual({ a: "a" }, { a: "a", b: "b" }); // false
Returns boolean
Splits an object (props) into a tuple where the first item is an object
with the passed keys, and the second item is an object with these keys
omitted.
props Tkeys (ReadonlyArray<K> | Array<K>)import { splitProps } from "reakit-utils";
splitProps({ a: "a", b: "b" }, ["a"]); // [{ a: "a" }, { b: "b" }]
Returns [any, Omit<T, K>]
Meta
Splits an object (props) into a tuple where the first item
is the state property, and the second item is the rest of the properties.
It is also backward compatible with version 1. If keys are passed then
splits an object (props) into a tuple where the first item is an object
with the passed keys, and the second item is an object with these keys
omitted.
props Tkeys (ReadonlyArray<K> | Array<K>) (optional, default [])import { splitProps } from "reakit-utils";
splitProps({ a: "a", b: "b" }, ["a"]); // [{ a: "a" }, { b: "b" }]
import { splitProps } from "reakit-utils";
splitProps({ state: { a: "a" }, b: "b" }); // [{ a: "a" }, { b: "b" }]
Returns [any, Omit<T, K>]
Checks whether element is focusable or not.
element Elementimport { isFocusable } from "reakit-utils";
isFocusable(document.querySelector("input")); // true
isFocusable(document.querySelector("input[tabindex='-1']")); // true
isFocusable(document.querySelector("input[hidden]")); // false
isFocusable(document.querySelector("input:disabled")); // false
Returns boolean
Checks whether element is tabbable or not.
element Elementimport { isTabbable } from "reakit-utils";
isTabbable(document.querySelector("input")); // true
isTabbable(document.querySelector("input[tabindex='-1']")); // false
isTabbable(document.querySelector("input[hidden]")); // false
isTabbable(document.querySelector("input:disabled")); // false
Returns boolean
Returns all the focusable elements in container.
container ElementReturns the first focusable element in container.
container ElementReturns (Element | null)
Returns all the tabbable elements in container, including the container
itself.
container ElementfallbackToFocusable boolean? If true, it'll return focusable elements if there are no tabbable ones.Returns the first tabbable element in container, including the container
itself if it's tabbable.
container ElementfallbackToFocusable boolean? If true, it'll return the first focusable element if there are no tabbable ones.Returns (Element | null)
Returns the last tabbable element in container, including the container
itself if it's tabbable.
container ElementfallbackToFocusable boolean? If true, it'll return the last focusable element if there are no tabbable ones.Returns (Element | null)
Returns the next tabbable element in container.
container ElementfallbackToFocusable boolean? If true, it'll return the next focusable element if there are no tabbable ones.Returns (Element | null)
Returns the previous tabbable element in container.
container ElementfallbackToFocusable boolean? If true, it'll return the previous focusable element if there are no tabbable ones.Returns (Element | null)
Returns the closest focusable element.
element (T | null)?container ElementReturns (Element | null)
Transforms arg into an array if it's not already.
arg Timport { toArray } from "reakit-utils";
toArray("a"); // ["a"]
toArray(["a"]); // ["a"]
Render prop type
Type: function (props: P): React.ReactElement<any>
"as" prop
Type: React.ElementType<P>
Type: any
Returns only the HTML attributes inside P
type OnlyId = ExtractHTMLAttributes<{ id: string; foo: string }>;
type HTMLAttributes = ExtractHTMLAttributes<any>;
Type: Pick<HTMLAttributesWithRef, Extract<any, any>>
Transforms "a" | "b" into "a" & "b"
Type: any
Generic component props with "as" prop
Type: any
Returns the type of the items in an array
Type: any
Any function
Type: function (...args: Array<any>): any
State hook setter.
Type: React.Dispatch<React.SetStateAction<T>>
Merges up to two React Refs into a single memoized function React Ref so you can pass it to an element.
refA React.Ref<any>?refB React.Ref<any>?import React from "react";
import { useForkRef } from "reakit-utils";
const Component = React.forwardRef((props, ref) => {
const internalRef = React.useRef();
return <div {...props} ref={useForkRef(internalRef, ref)} />;
});
React.useLayoutEffect that fallbacks to React.useEffect on server side
rendering.
A React.Ref that keeps track of the passed value.
value TReturns React.MutableRefObject<T>
React custom hook that returns the very first value passed to initialState,
even if it changes between re-renders.
initialState SealedInitialState<T>A React.useEffect that will not run on the first render.
effect React.EffectCallbackdeps (ReadonlyArray<any> | undefined)?MIT © Diego Haz
FAQs
Reakit utils
We found that reakit-utils demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.