@horizon-msft/rhwcw
v0.0.35-test.20240306
Published
React Horizon web component wrappers
Downloads
55
Readme
@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
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"/>
)
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 (placeholder)