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)