npm package: @microsoft/fast-react-utilities
Description: Utilities and tools for React development
Author: Microsoft
Latest version: 1.2.0
Deprecated: This package is no longer maintained.  See what we're doing today at https://github.com/microsoft/fast

# FAST React Utilities

A set of general purpose React utilities.

## Installation

`npm i --save @microsoft/fast-react-utilities`

## Exports
### Hooks
#### `useTimeout(callback: () => void, delay: number | null, dependencies?: any[]): void`
A React hook to declaratively invoke a timeout function. The callback be invoked once after `delay` - measured in milliseconds. Once the timeout is invoked, no other timeout will be registered unless duration changes.

To force a new timeout to be registered with a previous duration, supply *new* values to the `dependencies`. This is similar to how React's `useEffect` works.

##### Single execution of callback
```js
function FancyButton() {
    // Execute a callback invoked after 200ms. Callback will only be called once (unless duration changes)
    useTimeout(() => {
        alert("I'm a button")
    }, 200);

    return <button>hello world</button>
}
```
##### Execute callback whenever prop is changed
```js
function FancyButton() {
    // Execute a callback 200ms after render. A new callback will be registered
    // when props.value changes
    useTimeout((props) => {
        alert("I'm a button")
    }, 200, [props.value]);

    return <button>hello world</button>
}
```

##### Execute callback every render
```js
import { useTransitionState, TransitionStates } from "@microsoft/fast-react-utilities";

function FancyButton() {
    // Execute a callback 200ms after every render. If render happens before the delay,
    // the previous render's timeout will be canceled.
    useTimeout(() => {
        alert("I'm a button")
    }, 200, [Symbol()]);

    return <button>hello world</button>
}
```

#### `useTransitionState(active: boolean, duration: number | [number, number]): TransitionStates`
A React hook used to track the state of a transition based on initial and incoming `active` values. `useTransitionState` will return a value from the `TransitionStates` object, representing "inactive", "active", "activating", and "deactivating". When the incoming `active` argument changes from one render to the next, the return value will change to one of the *middle* states, "activating" (`false`->`true`) or "deactivating" (`true`->`false`). After the supplied duration, the hook will invoke a `setState` and return the state represented by the incoming `active` value.

When two duration values are provided, the first will be used when activating and the second will be used when deactivating.

```js
import { classNames } from "@microsoft/fast-web-utilities";
import { useTransitionState, TransitionStates } from "@microsoft/fast-react-utilities";

function FancyDialog(props) {
    const state = useTransitionState(props.visible, [300, 400]);

    return (
        <div
            role="dialog"
            className={classNames(
                "dialog",
                ["dialog_inactive", state === TransitionStates.inactive],
                ["dialog_active", state === TransitionStates.active],
                ["dialog_activating", state === TransitionStates.activating],
                ["dialog_deactivating", state === TransitionStates.deactivating]
            )}
            children={props.children}
        />
    );
}
```