JSPM

  • Created
  • Published
  • Downloads 13806
  • Score
    100M100P100Q137463F
  • License MIT

Fluent UI React component composition.

Package Exports

  • @fluentui/react-compose

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

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