Package Exports

@fluentui/react-compose
@fluentui/react-compose/lib-commonjs/next/index
@fluentui/react-compose/lib/next/index

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fluentui/react-compose) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@fluentui/react-compose

Composition functionality for Fluent UI

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

Usage

Currently supported only by functional components in @fluentui/react-northstar.

To import compose and use:

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