Next Popular Module

    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-foundation-react
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.0 • Public • Published

    FAST Components foundation React

    The foundation component for FAST component packages in React. The default export is an extension from the React.Component and includes additional functionality for extension by React component libraries.

    Installation

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

    Usage

    Basic implementation

    import React from "react";
    import ReactDOM from "react-dom";
    import Foundation from "@microsoft/fast-components-foundation-react";
    
    class MyComponent extends Foundation {
        render() {
            return <div />;
        }
    }
    
    export default MyComponent;

    Unhandled props

    A method which allows any property that has not been specified by the component extending Foundation to be accessed, eg. onClick, aria and datasets.

    Component example:

    class MyComponent extends Foundation {
        render() {
            return <div {...this.unhandledProps()} />;
        }
    }

    Component implementation:

    <MyComponent id={"my-component"} aria-hidden={true} />

    Rendered result:

    <div id="my-component" aria-hidden="true"></div>

    setRef and getRef

    The setRef and getRef use lodash's get/set API, so the provided string can be my-component-element, my-component-element[0] etc.

    class MyComponent extends Foundation {
        componentDidMount() {
            const myComponentElement = this.getRef("my-component-element");
    
            // do something
        }
    
        render() {
            return <div ref={this.setRef("my-component-element")} />;
        }
    }

    generateClassNames

    This method can be used to pass any className when it is passed.

    Component example:

    class MyComponent extends Foundation {
        render() {
            return <div className={this.generateClassNames()} />;
        }
    }

    Component implementation:

    <MyComponent className={"my-class-name"} />

    Rendered result:

    <div class="my-class-name"></div>

    withSlot

    Gets all children with the slot prop that matches a given string, example: this.withSlot("after").

    Component example:

    class MyComponent extends Foundation {
        render() {
            return (
                <div>
                    {this.withSlot("foo")}
                </div>
            );
        }
    }

    Component implementation:

    <MyComponent>
        <span slot="foo">
            Hello, world!
        </span>
    </MyComponent>

    Rendered result:

    <div>
        <span>
            Hello, world!
        </span>
    </div>

    withoutSlot

    Gets all children with the slot prop that does not match a given string, example: this.withoutSlot("after").

    Component example:

    class MyComponent extends Foundation {
        render() {
            return (
                <div>
                    {this.withoutSlot("foo")}
                </div>
            );
        }
    }

    Component implementation:

    <MyComponent>
        <span slot="foo">
            Hello, world!
        </span>
        <h1 slot="bar">
            Hello, pluto!
        </h1>
        <h2 slot="bat">
            A bold new world
        </h2>
    </MyComponent>

    Rendered result:

    <div>
        <h1>
            Hello, pluto!
        </h1>
        <h2>
            A bold new world
        </h2>
    </div>

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    71

    Version

    3.2.0

    License

    MIT

    Unpacked Size

    99.1 kB

    Total Files

    28

    Last publish

    Collaborators

    • microsoft1es
    • fastsvc
    • eisenbergeffect
    • nirice
    • janechu
    • chrisdholt
    • awentzel