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

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>