office-fabricfluentui-react

Fluent UI - best way to import components

I'm a beginner in the new Javascript world and would like to know the difference between

import { MessageBar } from "office-ui-fabric-react";

import { MessageBar } from "office-ui-fabric-react/lib-commonjs/MessageBar";

Both of them seem to work fine. I'm using webpack for creating final JS files. What is the recommended way to import components?

Solution

  • Both should work. The first one allows you to aggregate all your imports in a single expression.

    Note that UI Fabric is deprecated and you should switch to Fluent UI React or Fluent UI React Northstar. So for example your import could look like this:

    import { DatePicker, MessageBar } from '@fluentui/react';