@fluentui/react-bindings

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

- Installation
- Hooks
- useAccesibility()
- Usage
- useAutoControlled()
- Usage
- useStateManager()
- Usage
- Reference
- useStyles()
- Usage
- Reference
- useUnhandledProps()
- Usage
- Reference

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 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 | React.KeyboardEvent) => void;
src: string;
};

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

return (



);
};
`

useStyles()

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

$3

The example below assumes a component called will be used this way:

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

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

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

return {children};
};
`

$3

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

- 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.

$3

The example below assumes a component called will be used this way:

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

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

return {children};
};
`

$3

`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