Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-plugin-fabric-ui

Gatsby plugin for the Office Fabric UI framework. Adds the boilerplate needed for server-side rendering, which Gatsby performs during gatsby build.

Installation

npm install office-ui-fabric-react gatsby-plugin-fabric-ui

Usage

After installing the plugin, add it to your site’s config file:

gatsby-config.js

module.exports = {
    plugins: ['gatsby-plugin-fabric-ui'],
};

Then you can use any of the components as usual:

import React from 'react';
import { DefaultButton } from 'office-ui-fabric-react';

const Index = () => (
    <div>
        <DefaultButton>Hello, world!</DefaultButton>
    </div>
);

export default Index;

See the test folder for an example Gatsby site.

Compatibility

Currently only tested with:

  • react v16
  • gatsby v2
  • office-ui-fabric-react v6

Contributing

  1. Clone this repo.
  2. npm install
  3. Make changes to gatsby-ssr.jsx. Please also prettier via npm run format.
  4. To test your changes, run the sample project:
cd test
npm install
npm run build # test that SSR works properly
npm run develop # launches the sample site
  1. In the main package, you can also run npm test.