This package is a collection of react wrappers for the @fluentui/web-components v3 package.

Under the hood these wrappers use the @microsoft/fast-react-wrapper package, which does the heavy lifting of converting web components into react components.

npm i @horizon-msft/rfwcw --save-dev

or

yarn add -D @horizon-msft/rfwcw

Import the component into your react project and use just like any react component:

import { Badge } from "@horizon-msft/rfwcw"

const PageElement = () => (
    <Badge shape="rounded" size="large" color="danger"/>
)

The component api maps to the Fluent Web Component V3 api link to Web Components V3, it does not precisely follow the Fluent react api.

Also available for Angular Fluent Web Component Wrappers are the methods required for enabling styles and themes. In the root of your application styling can be enabled like this:

import { DesignToken, fabricLightTheme, setTheme } from "@horizon-msft/afwcw";

DesignToken.registerDefaultStyleTarget();

setTheme(fabricLightTheme);

// or use the base fluent theme
// setTheme(webLightTheme);

Here is a Stackblitz component implementation - Stackblitz

Current Components:

• Accordion
• Anchor Button
• Avatar
• Badge
• Button
• Compound Button
• Divider
• Image
• Label
• Menu Button
• Progress Bar
• Slider
• Spinner
• Switch
• Tabs
• Text