@horizon-msft/rfwcw

React Wrappers for Fluent UI web component

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.

Installation

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

or

yarn add -D @horizon-msft/rfwcw

Usage

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.

Applying styles using the fluent theme methods

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