1.0.2 • Published 4 months ago
@fluentui-contrib/react-headless-provider v1.0.2
@fluentui/react-headless-provider
A package that provides a headless provider, a replacement in some cases for FluentProvider
from @fluentui/react-components
.
HeadlessFluentProvider
does not render additional any DOM elements, only applies React Contexts needed for components from @fluentui/react-components
to render properly.
Following features work:
- rendering into different documents i.e.
targetDocument
prop customStyleHooks_unstable
&overrides_unstable
props
Following features don't work:
- scoped theming, in this scenario theming should be configured globally or separately
- scoped "dir", in this scenario text direction should be configured globally or separately
- polyfill for
:focus-visible
(useFocusVisible()
from@fluentui/react-tabster
) should be initialized separately
Designed to be used with createCSSRuleFromTheme()
, see for context microsoft/fluentui#21290.
Install
yarn add @fluentui-contrib/react-headless-provider
# or
npm install @fluentui-contrib/react-headless-provider
Usage
import * as React from 'react';
import { HeadlessFluentProvider } from '@fluentui-contrib/react-headless-provider';
export function RootContainer(props) {
const { targetDocument } = props;
return <HeadlessFluentProvider targetDocument={targetDocument}>{/* children */}</HeadlessFluentProvider>;
}