This package is a collection of react wrappers for the @horizon-msft/web-components 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"/>
)

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 (placeholder)