@fluentui/react-jsx-runtime

React JSX runtime for Fluent UI React

Fluent UI React requires the usage of a custom JSX runtime to support the slots API

Usage

[!NOTE] This custom JSX pragma should only be used in cases where you are trying to use the internal Fluent UI React slot API in conjunction with assertSlots().

If you are not using the internal slot API, don't use it.

In case you want to re-compose a component and redeclare its render method then this API will be necessary, learn more on Rendering a component with slots

To properly render a component with slots, our custom createElement method needs to be used instead of default React.createElement:

NOTE: It works with both automatic or classic jsxRuntime configuration.

React 17+

infers @jsxRuntime automatic

1/** @jsxImportSource @fluentui/react-jsx-runtime */
2
3import { assertSlots } from '@fluentui/react-utilities';
4
5const renderButton_unstable = (state: ButtonState) => {
6  const { iconOnly, iconPosition } = state;
7
8  assertSlots<ButtonSlots>(state);
9
10  return (
11    <state.root>
12      {iconPosition !== 'after' && state.icon && <state.icon />}
13      {!iconOnly && state.root.children}
14      {iconPosition === 'after' && state.icon && <state.icon />}
15    </state.root>
16  );
17};

React 16

infers @jsxRuntime classic

1/** @jsx createElement */
2
3// in order to apply our custom `createElement` factory to jsx transforms, to support slot creation, we need to import it physically
4import { createElement } from '@fluentui/react-jsx-runtime';
5
6import { assertSlots } from '@fluentui/react-utilities';
7
8const renderButton_unstable = (state: ButtonState) => {
9  const { iconOnly, iconPosition } = state;
10
11  assertSlots<ButtonSlots>(state);
12
13  return (
14    <state.root>
15      {iconPosition !== 'after' && state.icon && <state.icon />}
16      {!iconOnly && state.root.children}
17      {iconPosition === 'after' && state.icon && <state.icon />}
18    </state.root>
19  );
20};