@fluentui/react-utilities

Accessibility Utilities

The `useId` hook generates a unique ID that can be used for accessibility purposes, such as associating labels with form elements.

import { useId } from '@fluentui/react-utilities';

function AccessibleComponent() {
  const id = useId('example');
  return <div id={id}>Accessible Content</div>;
}

Styling Utilities

The `mergeClasses` function allows you to combine multiple class names into a single string, which is useful for applying multiple styles to a component.

import { mergeClasses } from '@fluentui/react-utilities';

const className = mergeClasses('class1', 'class2');

function StyledComponent() {
  return <div className={className}>Styled Content</div>;
}

Event Handling Utilities

The `useEventCallback` hook creates a stable callback function that can be used in event handlers, ensuring that the function reference does not change between renders.

import { useEventCallback } from '@fluentui/react-utilities';

function EventComponent() {
  const handleClick = useEventCallback((event) => {
    console.log('Button clicked', event);
  });
  return <button onClick={handleClick}>Click Me</button>;
}