@fluentui/react-jsx-runtime

@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

This library should only be used in the case where you are trying to use the internal slot API of Fluent UI React. If you are not using the internal slot API, you should not need to use this library.

In case you want to re-compose a component and redeclare its render method then this API will be necessary, here's our documentation on Rendering a component with slots

To properly render a component with slots the createElement method of @fluentui/react-jsx-runtime can be used as a replacement for React.createElement:

/** @jsxRuntime classic */
/** @jsx createElement */

// createElement custom JSX pragma is required to support slot creation
import { createElement } from '@fluentui/react-jsx-runtime';
import { assertSlots } from '@fluentui/react-utilities';

const renderButton_unstable = (state: ButtonState) => {
  const { iconOnly, iconPosition } = state;

  assertSlots<ButtonSlots>(state);

  return (
    <state.root>
      {iconPosition !== 'after' && state.icon && <state.icon />}
      {!iconOnly && state.root.children}
      {iconPosition === 'after' && state.icon && <state.icon />}
    </state.root>
  );
};

In case you're using typescript or any modern javascript transpiler, you can use JSX import source feature instead of depending on declaring the runtime on every file

In TSC case you can simply add this do tsconfig.json file:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@fluentui/react-jsx-runtime"
  }
}