# @fluentui/react-compose

> Fluent UI React component composition.

Latest version **0.19.15** (published 2021-02-26) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 50/100 (C)** — status: abandoned.

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

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.19.15 |
| Published | 2021-02-26 |
| First published | 2020-03-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 481.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20283 |
| Maintainers | kenotron_msft, miroslavstastny, levithomason, ecraig12345, uifabricteam, uifrnbot, dzearing, layershifter, jdhuntington, ling1726, allsnow |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-compose
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-compose

## Dependencies (5)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@types/classnames](https://npm.io/package/@types/classnames.md) ^2.2.9
- [@uifabric/utilities](https://npm.io/package/@uifabric/utilities.md) ^7.33.5
- [@uifabric/set-version](https://npm.io/package/@uifabric/set-version.md) ^7.0.24

## Recent versions

- 0.19.15 (latest) — 2021-02-26
- 0.19.24 (lts-7) — 2022-10-31
- 1.0.0-beta.34 (beta) — 2021-10-05
- 0.19.23 — 2022-09-30
- 0.19.22 — 2022-09-02
- 0.19.21 — 2022-09-02
- 0.19.20 — 2022-09-01
- 0.19.19 — 2022-08-30
- 0.19.18 — 2022-08-17
- 0.19.17 — 2022-05-19
- 0.19.16 — 2022-03-30
- 1.0.0-beta.33 — 2021-09-28
- 1.0.0-beta.32 — 2021-09-02
- 1.0.0-beta.31 — 2021-08-25
- 1.0.0-beta.30 — 2021-08-19
- … 104 more at https://npm.io/package/@fluentui/react-compose/versions

## README

# @fluentui/react-compose

**Composition functionality for [Fluent UI](https://aka.ms/fluent-ui/)**

This functionality is in the experimental stage and **should never be used in production** as APIs might change before final release.

### Usage

To import `compose` and use:

```js
import { Button } from '@fluentui/react-northstar';
import { compose } from '@fluentui/react-compose';

const PrimaryButton = compose(Button, {
  className: 'ui-primary-button',
  displayName: 'PrimaryButton',

  mapPropsToStylesProps: props => ({ compact: props.compact }),

  handledProps: ['compact'],
  overrideStyles: true,
});
```

- `className` overrides a `className` that we will be assigned to the `root` slot of a component
- `displayName` modifies a React's `displayName` for component, it will be also used as a selector for styles overrides in your theme
- `mapPropsToStylesProps` passes additional design terms to styles functions
- `handledProps` is an array of props that will not be bypassed to the component's root slot
- `overrideStyles` indicates should the component will use only its own styles or will merge those with parent's

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