@microsoft/fast-components-class-name-contracts-base

Type descriptions for the classnames that any given component can expect as props.

Stats

StarsIssuesVersionUpdatedCreatedSize
@microsoft/fast-components-class-name-contracts-base
104.8.0a year ago3 years agoMinified + gzip package size for @microsoft/fast-components-class-name-contracts-base in KB

Readme

FAST Components class name contracts base

This package provides the TypeScript typings for all FAST components class-name contracts. These contracts enable strict typing of JSS stylesheets and each component's expectation of which class-names will be made available (and under which keys those class-names reside) to the component at runtime.

A deeper dive

FAST base components are built from the ground-up to work with CSS module implementations. This means that each HTML class attribute can be dynamic and unique. To facilitate working with any CSS module implementation, each component expects as a data the class attribute values when the component is instantiated.

These contracts simply describe - as TypeScript interfaces - the key/value pairs that each component can expect to be able to use when retrieving these dynamic class-names.

inteface ButtonClassNameContract {
    button: string;
}

// In the button base-component, we use the class-name contract to inform which keys will available on the
// `managedClasses` object, which is where dynamic class-names get added as props to a component.
render(): JSX.Element {
    return (
        <button className={this.props.managedClasses.button}>{this.props.children}</button>
    );
}

TypeScript only

This package only contains TypeScript interfaces to be used by other packages - as such, it will get completely compiled out of your project during your build to JavaScript. If you're not using TypeScript, this package will have no effect on your codebase.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.