@horizon-msft/rhwcw NPM

@horizon-msft/rhwcw

React Wrappers for Horizon Web Compoennts

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.

Installation

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

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"/>
)

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: