@microsoft/fast-components-react-base v4.27.0

FAST Components React base

Base components are the structural, semantic, and interactive core of a piece of UI without any explicit visual representation. For the most part, base components are only as opinionated as they have to be to support the semantic, structural, and accessibility related goals. In rare cases, there are structural changes made to support external styling (such as native elements like an input of type checkbox). Base components are useful when building out a new design system, or when you have two components that require the same base functionality and structure, but completely different visual represenations (button vs flipper).

Installation

npm i --save @microsoft/fast-components-react-base

Usage

Basic implementation

An example of using one of the components from the @microsoft/fast-components-react-base package:

import React from "react";
import ReactDOM from "react-dom";
import { ClassNames, IButtonClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
import { Button } from "@microsoft/fast-components-react-base";

const root = document.createElement("div");
root.setAttribute("id", "root");
document.body.appendChild(root);

const classNames: ClassNames<IButtonClassNameContract> = {
    button: "my-button-classname"
};

function render(): void {
    ReactDOM.render(
        <Button managedClasses={classNames}>
            Click me!
        </Button>,
        root
    );
}

render();

Styled implementation

An example of using the manageJss from @microsoft/fast-jss-manager-react higher order component to export a component with a JSS style. See the @microsoft/fast-components-class-name-contracts-base for the list of class names that can be applied to the base components.

import React from "react";
import { Button } from "@microsoft/fast-components-react-base";
import manageJss from "@microsoft/fast-jss-manager-react";

const buttonStyles = {
    button: {
        background: "blue"
    }
};

export default manageJss(buttonStyles)(Button);

Component documentation

Each component comes with a README.md for implementation and other usage details, a JSON schema for the properties that can be used and additional TypeScript definition files.