# @fluentui/react-bindings

> A set of components and hooks to build components libraries and UI kits.

Latest version **0.71.4** (published 2026-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-bindings
pnpm add @fluentui/react-bindings
yarn add @fluentui/react-bindings
bun add @fluentui/react-bindings
```

## Health

**Score 70/100 (B)** — status: active.

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

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.71.4 |
| Published | 2026-04-28 |
| First published | 2019-12-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20303 |
| Author | Oleksandr Fediashov |
| Maintainers | chrisdholt, miroslavstastny, levithomason, uifabricteam, uifrnbot, layershifter, justslone, microsoft1es, sopranopillow |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-bindings
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui/tree/master/packages/fluentui/react-bindings
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-bindings

## Dependencies (11)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [react-is](https://npm.io/package/react-is.md) ^17.0.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.10.4
- [@fluentui/styles](https://npm.io/package/@fluentui/styles.md) ^0.71.4
- [@fluentui/accessibility](https://npm.io/package/@fluentui/accessibility.md) ^0.71.4
- [@fluentui/dom-utilities](https://npm.io/package/@fluentui/dom-utilities.md) ^1.1.1
- [@fluentui/react-component-ref](https://npm.io/package/@fluentui/react-component-ref.md) ^0.71.4
- [@fluentui/react-northstar-fela-renderer](https://npm.io/package/@fluentui/react-northstar-fela-renderer.md) ^0.71.4
- [@fluentui/react-component-event-listener](https://npm.io/package/@fluentui/react-component-event-listener.md) ^0.71.4

## Recent versions

- 0.71.4 (latest) — 2026-04-28
- 0.66.1-beta.0 (beta) — 2023-02-06
- 0.47.15 (patch) — 2020-11-25
- 0.47.10-experimental.0 (experimental) — 2020-09-18
- 0.31.1-alpha.6224 (canary) — 2020-02-25
- 0.71.3 — 2026-02-25
- 0.71.2 — 2026-02-25
- 0.71.1 — 2025-11-20
- 0.71.0 — 2025-11-03
- 0.70.0 — 2025-10-30
- 0.69.1 — 2025-10-29
- 0.69.0 — 2025-10-27
- 0.68.2 — 2025-10-27
- 0.67.2 — 2025-10-21
- 0.68.1 — 2025-10-03
- … 77 more at https://npm.io/package/@fluentui/react-bindings/versions

## README

# `@fluentui/react-bindings`

A set of reusable components and hooks to build component libraries and UI kits.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Hooks](#hooks)
  - [`useAccesibility()`](#useaccesibility)
    - [Usage](#usage)
  - [`useAutoControlled()`](#useautocontrolled)
    - [Usage](#usage-1)
  - [`useStateManager()`](#usestatemanager)
    - [Usage](#usage-2)
    - [Reference](#reference)
  - [`useStyles()`](#usestyles)
    - [Usage](#usage-3)
    - [Reference](#reference-1)
  - [`useUnhandledProps()`](#useunhandledprops)
    - [Usage](#usage-4)
    - [Reference](#reference-2)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# Installation

**NPM**

```bash
npm install --save @fluentui/react-bindings
```

**Yarn**

```bash
yarn add @fluentui/react-bindings
```

# Hooks

## `useAccesibility()`

A React hook that provides bindings for accessibility behaviors.

#### Usage

The example below assumes a component called `<Image>` will be used this way:

```tsx
const imageBehavior: Accessibility<{ disabled: boolean }> = props => ({
  attributes: {
    root: {
      'aria-disabled': props.disabled,
      tabIndex: -1,
    },
    img: {
      role: 'presentation',
    },
  },
  keyActions: {
    root: {
      click: {
        keyCombinations: [{ keyCode: 13 /* equals Enter */ }],
      },
    },
  },
});

type ImageProps = {
  disabled?: boolean;
  onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
  src: string;
};

const Image: React.FC<ImageProps> = props => {
  const { disabled, onClick, src, ...rest } = props;
  const getA11Props = useAccessibility(imageBehavior, {
    mapPropsToBehavior: () => ({
      disabled,
    }),
    actionHandlers: {
      click: (e: React.KeyboardEvent<HTMLDivElement>) => {
        if (onClick) onClick(e);
      },
    },
  });

  return (
    <div {...getA11Props('root', { onClick, ...rest })}>
      <img {...getA11Props('img', { src })} />
    </div>
  );
};
```

## `useStyles()`

A React hook that provides bindings for usage CSSinJS styles and Fluent theming.

### Usage

The example below assumes a component called `<Text>` will be used this way:

```tsx
type TextComponentProps = {
  className?: string;
  color?: string;
};

const Text: React.FunctionComponent<TextComponentProps> = props => {
  const { className, children, color } = props;

  const { classes } = useStyles('Text', {
    className: 'ui-text',
    mapPropsToStyles: () => ({ color }),
  });

  return <span className={classes.root}>{children}</span>;
};
```

### Reference

```tsx
const { classes } = useStyles(
  displayName: string,
  options: UseStylesOptions<Props>,
)
```

- `displayName` - a component name to lookup in theme
- `options.className` - optional, a special class name that will be always added to the `root` slot
- `options.mapPropsToStyles` - optional, a set of props that will be passed style functions, only primitives are allowed
- `options.rtl` - optional, sets RTL mode

## `useUnhandledProps()`

A React hook that returns an object consisting of props beyond the scope of the component. Useful for getting and spreading unknown props from the user.

### Usage

The example below assumes a component called `<Text>` will be used this way:

```tsx
type TextComponentProps = React.HTMLAttributes<HTMLSpanElement> * {
  className?: string;
};

const Text: React.FunctionComponent<TextComponentProps> = props => {
  const { className, children } = props;
  const unhandledProps = useUnhandledProps(['className'], props);

  return <span {...unhandledProps} className={classes.root}>{children}</span>;
};
```

### Reference

```tsx
const unhandledProps = useUnhandledProps(handledProps, props);
```

- `unhandledProps` - an object with unhandled props by component
- `handledProps` - an array with names of handled props
- `props` - an object with all props that are passed to a component

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