https://github.com/jasonnutter/gatsby-plugin-fabric-ui

Gatsby plugin for the Office Fabric UI framework
https://github.com/jasonnutter/gatsby-plugin-fabric-ui

gatsby gatsby-plugin office-ui-fabric

Last synced: 3 months ago
JSON representation

Gatsby plugin for the Office Fabric UI framework

• Host: GitHub
• URL: https://github.com/jasonnutter/gatsby-plugin-fabric-ui
• Owner: jasonnutter
• License: mit
• Created: 2018-11-04T17:46:36.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-06T07:30:51.000Z (about 6 years ago)
• Last Synced: 2024-10-11T10:22:44.095Z (3 months ago)
• Topics: gatsby, gatsby-plugin, office-ui-fabric
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/gatsby-plugin-fabric-ui
• Size: 10.7 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gatsby-plugin-fabric-ui

Gatsby plugin for the [Office Fabric UI framework](https://github.com/OfficeDev/office-ui-fabric-react). Adds [the boilerplate needed for server-side rendering](https://github.com/OfficeDev/office-ui-fabric-react#server-side-rendering), which Gatsby performs during `gatsby build`.

## Installation

```sh

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`

```js

module.exports = {

    plugins: ['gatsby-plugin-fabric-ui'],

};

```

Then you can use any of the components as usual:

```jsx

import React from 'react';

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

const Index = () => (

    


        Hello, world!

    

);


export default Index;

```

See the [test](./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:

```sh

cd test

npm install

npm run build # test that SSR works properly

npm run develop # launches the sample site

```

5. In the main package, you can also run `npm test`.