This package has been deprecated

    Author message:

    This package is no longer maintained. See what we're doing today at https://github.com/microsoft/fast

    @microsoft/fast-components-react-base
    TypeScript icon, indicating that this package has built-in type declarations

    4.27.0 • Public • Published

    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.

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    699

    Version

    4.27.0

    License

    MIT

    Unpacked Size

    792 kB

    Total Files

    443

    Last publish

    Collaborators

    • microsoft1es
    • fastsvc
    • chrisdholt
    • awentzel
    • janechu
    • fluentweb
    • nirice