Office UI Fabric React Snippets

This extension contains code snippets for creating components for Office UI Fabric React and it's styling library mergeStyles.

Installation

In order to install an extension you need to launch the Command Pallete (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones.

Supported languages (file extensions)

TypeScript (.ts)
TypeScript React (.tsx)

Usage

When creating a new Fabric React component, or converting an old one from sass, these snippets can be useful to scaffold some of the most used code.

Snippets

Below is a list of all available snippets and the triggers for each one.

File-type	Trigger	Description
.ts	`fabric-componentTypes→`	Scaffolds a Component.types.ts file.
.ts	`fabric-getStyles→`	Scaffolds a Component.styles.ts file.
.tsx	`fabric-styledComponent→`	Scaffolds your Component.tsx file
.tsx	`fabric-classNamesFunction→`	Generates base functions for enabling themes and getStyles API
.tsx	`fabric-classNamesConst→`	Generates base for getting your classNames from the styles file.

Office UI Fabric React Component Snippets

jordanjanzen

Office UI Fabric React Snippets

Installation

Supported languages (file extensions)

Usage

Snippets