# reakit-utils

> Reakit utils

Latest version **0.15.2** (published 2021-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install reakit-utils
pnpm add reakit-utils
yarn add reakit-utils
bun add reakit-utils
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.15.2 |
| Published | 2021-09-06 |
| First published | 2019-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 212.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8626 |
| Author | Diego Haz |
| Maintainers | diegohaz |
| Keywords | reakit, react, utils |

## Links

- npm: https://www.npmjs.com/package/reakit-utils
- Repository: https://github.com/reakit/reakit/tree/master/packages/reakit-utils
- npm.io page: https://npm.io/package/reakit-utils

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.15.2 (latest) — 2021-09-06
- 0.16.0-alpha.1 (next) — 2021-04-25
- 0.15.1 — 2020-12-11
- 0.15.0 — 2020-11-12
- 0.15.0-alpha.4 — 2020-10-24
- 0.15.0-alpha.3 — 2020-09-22
- 0.14.4 — 2020-09-22
- 0.15.0-alpha.2 — 2020-09-06
- 0.15.0-alpha.1 — 2020-09-05
- 0.15.0-alpha.0 — 2020-09-03
- 0.14.3 — 2020-08-24
- 0.14.2 — 2020-08-17
- 0.14.1 — 2020-08-13
- 0.14.0 — 2020-08-06
- 0.14.0-alpha.1 — 2020-08-06
- … 22 more at https://npm.io/package/reakit-utils/versions

## README

# reakit-utils

<a href="https://npmjs.org/package/reakit-utils"><img alt="NPM version" src="https://img.shields.io/npm/v/reakit-utils.svg" /></a>

> **This is experimental** and may have breaking changes in minor versions.

## Installation

npm:

```sh
npm i reakit-utils
```

Yarn:

```sh
yarn add reakit-utils
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

#### Table of Contents

-   [applyState](#applystate)
-   [canUseDOM](#canusedom)
-   [closest](#closest)
-   [contains](#contains)
-   [createEvent](#createevent)
-   [createOnKeyDown](#createonkeydown)
-   [isUA](#isua)
-   [ensureFocus](#ensurefocus)
-   [fireBlurEvent](#fireblurevent)
-   [fireEvent](#fireevent)
-   [fireKeyboardEvent](#firekeyboardevent)
-   [flatten](#flatten)
-   [getActiveElement](#getactiveelement)
-   [getDocument](#getdocument)
-   [getNextActiveElementOnBlur](#getnextactiveelementonblur)
-   [getWindow](#getwindow)
-   [hasFocus](#hasfocus)
-   [hasFocusWithin](#hasfocuswithin)
-   [isButton](#isbutton)
-   [isEmpty](#isempty)
-   [isInteger](#isinteger)
-   [isObject](#isobject)
-   [isPlainObject](#isplainobject)
-   [isPortalEvent](#isportalevent)
-   [isPromise](#ispromise)
-   [isSelfTarget](#isselftarget)
-   [isTextField](#istextfield)
-   [matches](#matches)
-   [normalizePropsAreEqual](#normalizepropsareequal)
-   [omit](#omit)
-   [pick](#pick)
-   [removeIndexFromArray](#removeindexfromarray)
-   [removeItemFromArray](#removeitemfromarray)
-   [shallowEqual](#shallowequal)
-   [\_\_deprecatedSplitProps](#__deprecatedsplitprops)
-   [splitProps](#splitprops)
-   [tabbable](#tabbable)
-   [toArray](#toarray)
-   [types](#types)
-   [useForkRef](#useforkref)
-   [useIsomorphicEffect](#useisomorphiceffect)
-   [useLiveRef](#useliveref)
-   [useSealedState](#usesealedstate)
-   [useUpdateEffect](#useupdateeffect)

### applyState

Receives a `setState` argument and calls it with `currentValue` if it's a
function. Otherwise return the argument as the new value.

#### Parameters

-   `argument` **React.SetStateAction&lt;T>** 
-   `currentValue` **T** 

#### Examples

```javascript
import { applyState } from "reakit-utils";

applyState((value) => value + 1, 1); // 2
applyState(2, 1); // 2
```

### canUseDOM

It's `true` if it is running in a browser environment or `false` if it is not (SSR).

#### Examples

```javascript
import { canUseDOM } from "reakit-utils";

const title = canUseDOM ? document.title : "";
```

### closest

Ponyfill for `Element.prototype.closest`

#### Parameters

-   `element` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 
-   `selectors` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 

#### Examples

```javascript
import { closest } from "reakit-utils";

closest(document.getElementById("id"), "div");
// same as
document.getElementById("id").closest("div");
```

### contains

Similar to `Element.prototype.contains`, but a little bit faster when
`element` is the same as `child`.

#### Parameters

-   `parent` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 
-   `child` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 

#### Examples

```javascript
import { contains } from "reakit-utils";

contains(document.getElementById("parent"), document.getElementById("child"));
```

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### createEvent

Creates an `Event` in a way that also works on IE 11.

#### Parameters

-   `element` **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** 
-   `type` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
-   `eventInit` **EventInit?** 

#### Examples

```javascript
import { createEvent } from "reakit-utils";

const el = document.getElementById("id");
el.dispatchEvent(createEvent(el, "blur", { bubbles: false }));
```

Returns **[Event](https://developer.mozilla.org/docs/Web/API/Event)** 

### createOnKeyDown

Returns an `onKeyDown` handler to be passed to a component.

#### Parameters

-   `options` **Options**  (optional, default `{}`)
    -   `options.keyMap`  
    -   `options.onKey`  
    -   `options.stopPropagation`  
    -   `options.onKeyDown`  
    -   `options.shouldKeyDown`   (optional, default `()=>true`)
    -   `options.preventDefault`   (optional, default `true`)

Returns **React.KeyboardEventHandler** 

### isUA

Checks if a given string exists in the user agent string.

#### Parameters

-   `string` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 

### ensureFocus

Ensures `element` will receive focus if it's not already.

#### Parameters

-   `element` **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** 
-   `$1` **EnsureFocusOptions**  (optional, default `{}`)
    -   `$1.preventScroll`  
    -   `$1.isActive`   (optional, default `hasFocus`)

#### Examples

```javascript
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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** `requestAnimationFrame` call ID so it can be passed to `cancelAnimationFrame` if needed.

### fireBlurEvent

Creates and dispatches a blur event in a way that also works on IE 11.

#### Parameters

-   `element` **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** 
-   `eventInit` **FocusEventInit?** 

#### Examples

```javascript
import { fireBlurEvent } from "reakit-utils";

fireBlurEvent(document.getElementById("id"));
```

### fireEvent

Creates and dispatches `Event` in a way that also works on IE 11.

#### Parameters

-   `element` **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** 
-   `type` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
-   `eventInit` **EventInit** 

#### Examples

```javascript
import { fireEvent } from "reakit-utils";

fireEvent(document.getElementById("id"), "blur", {
  bubbles: true,
  cancelable: true,
});
```

### fireKeyboardEvent

Creates and dispatches `KeyboardEvent` in a way that also works on IE 11.

#### Parameters

-   `element` **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** 
-   `type` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
-   `eventInit` **KeyboardEventInit** 

#### Examples

```javascript
import { fireKeyboardEvent } from "reakit-utils";

fireKeyboardEvent(document.getElementById("id"), "keydown", {
  key: "ArrowDown",
  shiftKey: true,
});
```

### flatten

Transforms an array with multiple levels into a flattened one.

#### Parameters

-   `array` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;T>** 

#### Examples

```javascript
import { flatten } from "reakit-utils";

flatten([0, 1, [2, [3, 4], 5], 6]);
// => [0, 1, 2, 3, 4, 5, 6]
```

### getActiveElement

Returns `element.ownerDocument.activeElement`.

#### Parameters

-   `element` **([Element](https://developer.mozilla.org/docs/Web/API/Element) \| [Document](https://developer.mozilla.org/docs/Web/API/Document) | null)?** 

### getDocument

Returns `element.ownerDocument || document`.

#### Parameters

-   `element` **([Element](https://developer.mozilla.org/docs/Web/API/Element) \| [Document](https://developer.mozilla.org/docs/Web/API/Document) | null)?** 

Returns **[Document](https://developer.mozilla.org/docs/Web/API/Document)** 

### getNextActiveElementOnBlur

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.

#### Parameters

-   `event` **(React.FocusEvent | [FocusEvent](https://developer.mozilla.org/docs/Web/API/FocusEvent))** 

#### Examples

```javascript
import { getNextActiveElementOnBlur } from "reakit-utils";

const element = document.getElementById("id");
element.addEventListener("blur", (event) => {
  const nextActiveElement = getNextActiveElementOnBlur(event);
});
```

### getWindow

Returns `element.ownerDocument.defaultView || window`.

#### Parameters

-   `element` **[Element](https://developer.mozilla.org/docs/Web/API/Element)?** 

Returns **[Window](https://developer.mozilla.org/docs/Web/API/Window)** 

### hasFocus

Checks if `element` has focus. Elements that are referenced by
`aria-activedescendant` are also considered.

#### Parameters

-   `element` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 

#### Examples

```javascript
import { hasFocus } from "reakit-utils";

hasFocus(document.getElementById("id"));
```

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### hasFocusWithin

Checks if `element` has focus within. Elements that are referenced by
`aria-activedescendant` are also considered.

#### Parameters

-   `element` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 

#### Examples

```javascript
import { hasFocusWithin } from "reakit-utils";

hasFocusWithin(document.getElementById("id"));
```

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### isButton

Checks whether `element` is a native HTML button element.

#### Parameters

-   `element` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 

#### Examples

```javascript
import { 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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### isEmpty

Checks whether `arg` is empty or not.

#### Parameters

-   `arg` **any** 

#### Examples

```javascript
import { 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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### isInteger

Checks whether `arg` is an integer or not.

#### Parameters

-   `arg` **any** 

#### Examples

```javascript
import { isInteger } from "reakit-utils";

isInteger(1); // true
isInteger(1.5); // false
isInteger("1"); // true
isInteger("1.5"); // false
```

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### isObject

Checks whether `arg` is an object or not.

#### Parameters

-   `arg` **any** 

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### isPlainObject

Checks whether `arg` is a plain object or not.

#### Parameters

-   `arg` **any** 

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### isPortalEvent

Returns `true` if `event` has been fired within a React Portal element.

#### Parameters

-   `event` **React.SyntheticEvent&lt;[Element](https://developer.mozilla.org/docs/Web/API/Element), [Event](https://developer.mozilla.org/docs/Web/API/Event)>** 

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### isPromise

Checks whether `arg` is a promise or not.

#### Parameters

-   `arg` **(T | [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)&lt;T>)** 

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### isSelfTarget

Returns `true` if `event.target` and `event.currentTarget` are the same.

#### Parameters

-   `event` **React.SyntheticEvent** 

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### isTextField

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.

#### Parameters

-   `element` **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** 

#### Examples

```javascript
import { 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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### matches

-   **See: <https://developer.mozilla.org/en-US/docs/Web/API/Element/matches>
    **

Ponyfill for `Element.prototype.matches`

#### Parameters

-   `element` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 
-   `selectors` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### normalizePropsAreEqual

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

#### Parameters

-   `propsAreEqual` **function (prev: O, next: O): [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

Returns **function (prev: PropsWithAs&lt;O, T>, next: PropsWithAs&lt;O, T>): [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### omit

Omits specific keys from an object.

#### Parameters

-   `object` **T** 
-   `paths` **(ReadonlyArray&lt;K> | [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;K>)** 

#### Examples

```javascript
import { omit } from "reakit-utils";

omit({ a: "a", b: "b" }, ["a"]); // { b: "b" }
```

Returns **Omit&lt;T, K>** 

### pick

Picks specific keys from an object.

#### Parameters

-   `object` **T** 
-   `paths` **(ReadonlyArray&lt;K> | [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;K>)** 

#### Examples

```javascript
import { pick } from "reakit-utils";

pick({ a: "a", b: "b" }, ["a"]); // { a: "a" }
```

### removeIndexFromArray

Immutably removes an index from an array.

#### Parameters

-   `array` **T** 
-   `index` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** 

#### Examples

```javascript
import { removeIndexFromArray } from "reakit-utils";

removeIndexFromArray(["a", "b", "c"], 1); // ["a", "c"]
```

Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)** A new array without the item in the passed index.

### removeItemFromArray

Immutably removes an item from an array.

#### Parameters

-   `array` **A** 
-   `item` **any** 

#### Examples

```javascript
import { 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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)** A new array without the passed item.

### shallowEqual

Compares two objects.

#### Parameters

-   `objA` **Record&lt;any, any>?** 
-   `objB` **Record&lt;any, any>?** 

#### Examples

```javascript
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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

### \_\_deprecatedSplitProps

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.

#### Parameters

-   `props` **T** 
-   `keys` **(ReadonlyArray&lt;K> | [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;K>)** 

#### Examples

```javascript
import { splitProps } from "reakit-utils";

splitProps({ a: "a", b: "b" }, ["a"]); // [{ a: "a" }, { b: "b" }]
```

Returns **\[any, Omit&lt;T, K>]** 

**Meta**

-   **deprecated**: will be removed in version 2


### splitProps

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.

#### Parameters

-   `props` **T** 
-   `keys` **(ReadonlyArray&lt;K> | [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;K>)**  (optional, default `[]`)

#### Examples

```javascript
import { splitProps } from "reakit-utils";

splitProps({ a: "a", b: "b" }, ["a"]); // [{ a: "a" }, { b: "b" }]
```

```javascript
import { splitProps } from "reakit-utils";

splitProps({ state: { a: "a" }, b: "b" }); // [{ a: "a" }, { b: "b" }]
```

Returns **\[any, Omit&lt;T, K>]** 

### tabbable

#### isFocusable

Checks whether `element` is focusable or not.

##### Parameters

-   `element` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 

##### Examples

```javascript
import { 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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

#### isTabbable

Checks whether `element` is tabbable or not.

##### Parameters

-   `element` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 

##### Examples

```javascript
import { 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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 

#### getAllFocusableIn

Returns all the focusable elements in `container`.

##### Parameters

-   `container` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 

Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Element](https://developer.mozilla.org/docs/Web/API/Element)>** 

#### getFirstFocusableIn

Returns the first focusable element in `container`.

##### Parameters

-   `container` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 

Returns **([Element](https://developer.mozilla.org/docs/Web/API/Element) | null)** 

#### getAllTabbableIn

Returns all the tabbable elements in `container`, including the container
itself.

##### Parameters

-   `container` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 
-   `fallbackToFocusable` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** If `true`, it'll return focusable elements if there are no tabbable ones.

Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Element](https://developer.mozilla.org/docs/Web/API/Element)>** 

#### getFirstTabbableIn

Returns the first tabbable element in `container`, including the container
itself if it's tabbable.

##### Parameters

-   `container` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 
-   `fallbackToFocusable` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** If `true`, it'll return the first focusable element if there are no tabbable ones.

Returns **([Element](https://developer.mozilla.org/docs/Web/API/Element) | null)** 

#### getLastTabbableIn

Returns the last tabbable element in `container`, including the container
itself if it's tabbable.

##### Parameters

-   `container` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 
-   `fallbackToFocusable` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** If `true`, it'll return the last focusable element if there are no tabbable ones.

Returns **([Element](https://developer.mozilla.org/docs/Web/API/Element) | null)** 

#### getNextTabbableIn

Returns the next tabbable element in `container`.

##### Parameters

-   `container` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 
-   `fallbackToFocusable` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** If `true`, it'll return the next focusable element if there are no tabbable ones.

Returns **([Element](https://developer.mozilla.org/docs/Web/API/Element) | null)** 

#### getPreviousTabbableIn

Returns the previous tabbable element in `container`.

##### Parameters

-   `container` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 
-   `fallbackToFocusable` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** If `true`, it'll return the previous focusable element if there are no tabbable ones.

Returns **([Element](https://developer.mozilla.org/docs/Web/API/Element) | null)** 

#### getClosestFocusable

Returns the closest focusable element.

##### Parameters

-   `element` **(T | null)?** 
-   `container` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** 

Returns **([Element](https://developer.mozilla.org/docs/Web/API/Element) | null)** 

### toArray

Transforms `arg` into an array if it's not already.

#### Parameters

-   `arg` **T** 

#### Examples

```javascript
import { toArray } from "reakit-utils";

toArray("a"); // ["a"]
toArray(["a"]); // ["a"]
```

### types

#### RenderProp

Render prop type

Type: function (props: P): React.ReactElement&lt;any>

#### As

"as" prop

Type: React.ElementType&lt;P>

#### HTMLAttributesWithRef

Type: any

#### ExtractHTMLAttributes

Returns only the HTML attributes inside P

```ts
type OnlyId = ExtractHTMLAttributes<{ id: string; foo: string }>;
type HTMLAttributes = ExtractHTMLAttributes<any>;
```

Type: Pick&lt;HTMLAttributesWithRef, Extract&lt;any, any>>

#### UnionToIntersection

Transforms `"a" | "b"` into `"a" & "b"`

Type: any

#### PropsWithAs

Generic component props with "as" prop

Type: any

#### ArrayValue

Returns the type of the items in an array

Type: any

#### AnyFunction

Any function

Type: function (...args: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;any>): any

#### SetState

State hook setter.

Type: React.Dispatch&lt;React.SetStateAction&lt;T>>

### useForkRef

Merges up to two React Refs into a single memoized function React Ref so you
can pass it to an element.

#### Parameters

-   `refA` **React.Ref&lt;any>?** 
-   `refB` **React.Ref&lt;any>?** 

#### Examples

```javascript
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)} />;
});
```

### useIsomorphicEffect

`React.useLayoutEffect` that fallbacks to `React.useEffect` on server side
rendering.

### useLiveRef

A `React.Ref` that keeps track of the passed `value`.

#### Parameters

-   `value` **T** 

Returns **React.MutableRefObject&lt;T>** 

### useSealedState

React custom hook that returns the very first value passed to `initialState`,
even if it changes between re-renders.

#### Parameters

-   `initialState` **SealedInitialState&lt;T>** 

### useUpdateEffect

A `React.useEffect` that will not run on the first render.

#### Parameters

-   `effect` **React.EffectCallback** 
-   `deps` **(ReadonlyArray&lt;any> | [undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined))?** 

## License

MIT © [Diego Haz](https://github.com/diegohaz)

---
_Source: https://npm.io/package/reakit-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._