Fluent UI React

Fluent UI Introduction

A cross-platform, open-source design system called Fluent UI React provides designers and developers with the tools they need to create outstanding applications. It is a design language that Microsoft created in 2017. Fluent UI is used in many products, including Microsoft Office 365, OneDrive, Outlook, Azure, and many others, to ensure that all applications seem the same across all platforms. It's the only library you should use if you enjoy the simple, clean design of Microsoft's software. The installation of Fluent UI and its integration with React.js will be covered in this post.

Fluent UI React, also known as Office UI Fabric, is a user interface design system created by Microsoft. It is composed of a set of React components, design guidelines, and tools for building user interfaces that are consistent with the look and feel of Microsoft products such as Office and Windows.

The components provided by Fluent UI include buttons, forms, navigation elements, and more. They are designed to be highly customizable, allowing developers to adjust the look and feel of the components to match their specific needs.

In addition to the React components, Fluent UI React also includes guidelines for typography, colour, and layout. These guidelines are intended to help developers create user interfaces that are cohesive and professional-looking. Fluent UI also provides tools for creating custom themes, such as the Theme Designer, which allows developers to easily create and apply custom colour schemes to their applications. It also provides support for accessibility, internationalization, and RTL (Right to Left) languages.

Overall, Fluent UI React is a comprehensive design system that provides developers with the tools they need to create polished and professional-looking user interfaces for their React applications.

Who Uses Fluent UI React?

The Fluent UI project replaced the Office UI Fabric React project. This repository (fluent UI react in the Microsoft company) was previously the office-ui-fabric-react repository. Any current Fabric usage, repo clones, pull requests, or problem reporting shouldn't be affected by the name change. Links ought to reroute to the new place. The @fluentui/react library, formerly known as office-ui-fabric-react, is now accessible.

Fluent UI React is primarily used by organizations that are part of the Microsoft ecosystem, such as those that use Office and Windows products. Some examples of organizations that use Fluent UI React include:

• Microsoft itself, which uses Fluent UI react in many of its web-based applications such as Office and Outlook
• Other companies that use Office and Windows products, such as businesses and educational institutions.
• Developers and organizations that want to create user interfaces that are consistent with the look and feel of Microsoft products for their web-based applications and products.

However, it's worth mentioning that Fluent UI React is an open-source library and it's not limited to the Microsoft ecosystem, it can be used by any organization or developer that wants to use it.

Features of Fluent UI

Fluent UI React is a user interface framework developed by Microsoft and it has features like Highly customizable, Up to date components, Cross-platform, and Open-source. It is used to design and build user interfaces for web and mobile applications. Some of its key features include:

• Component library:
  Fluent UI react includes a wide variety of pre-built components, such as buttons, forms, lists, and more, that developers can use to quickly and easily build user interfaces. These components are designed to be consistent with Microsoft's design guidelines and are highly customizable.
• Responsive design:
  Fluent UI react components are designed to adapt to different screen sizes and orientations, making it easy to create responsive user interfaces that work well on a variety of devices.
• Accessibility:
  Fluent UI react components are designed to be accessible to users with disabilities, and the framework includes built-in support for screen readers, keyboard navigation, and other accessibility features.
• Internationalization and localization:
  Fluent UI react includes support for internationalization and localization, making it easy to build user interfaces that can be used in different languages and regions.
• Cross-platform support:
  Fluent UI React can be used to build user interfaces for web and mobile applications, and it is compatible with a variety of popular front-end frameworks and libraries, such as React, Angular, and Vue.
• Customizable themes:
  Fluent UI includes a theming system that allows developers to customize the look and feel of their user interfaces by changing colours, fonts, and other design elements.
• Consistent design:
  Fluent UI also includes a set of design guidelines and patterns that help ensure that user interfaces built with the framework have a consistent look and feel. This can help create a more cohesive and professional user experience.

Overall, Fluent UI React is a powerful and versatile user interface framework that makes it easy to create professional-looking and highly functional user interfaces for web and mobile applications.

Getting Started with Fluent UI

Creating a New App

• To use Fluent UI in a React application, you'll first need to create a new React project using a tool like create-react-app.
• Once you have a new React project set up, you can begin installing the Fluent UI React package. This can be done using npm or yarn, by running the command:

or

in the terminal

Integrating into an Existing Project

• The package will be added as a dependency in your package as a result. Download the react.json file from node_modules/@fluentui/react.
• Under the lib subdirectory, the library contains entry points for ES modules (use lib-amd if you need AMD, or lib-commonjs if you need commonjs).

Project Structure

• The structure of your project will depend on the specific needs of your application, but it's common to have a separate folder for components that use Fluent UI react. This allows you to easily import and use the Fluent UI components throughout your application.

Installing Fluent UI

• To use Fluent UI react components in your application, you'll need to import them into your component files. This can be done by using the import statement and specifying the component you want to use, like so:

• The App.js file is typically the entry point for a React application. This is where you will render the root component of your application, and from there it will handle the routing and rendering of other components.

Version Policy

• Fluent UI react adheres to semantic versioning. However, we only consider constructs directly importable at the package level or from files at the root (e.g. @fluentui/react/lib/Utilities or @fluentui/react/lib-amd/Styling) to be part of our API surface. Everything else is considered package-internal and may be subject to changes, moves, renames, etc.
• Fluent UI follows a version policy of major version releases every 6 months and patch releases every month. This allows for new features and bug fixes to be added promptly, while also providing a clear versioning system for managing updates to the library.

Browser Support

• Fluid UI, All evergreen browsers are supported by React, with Internet Explorer 11 serving as the minimum-bar version. For more details, go to the browser support document.

Right-to-Left Support

• Depending on whether the dir property is specified on the html element (dir="rtl" will reverse everything), all components can render in either LTR or RTL. If you don't have control over how the html element is rendered, you can also utilize the setRTL API.

  Example:

• Fluent UI supports right-to-left (RTL) languages, such as Arabic and Hebrew, by providing a way to set the text direction of the application to RTL. This can be done by setting the dir attribute on the root element of the application to rtl.

Server-Side Rendering

• Fluid UI Although it requires modifying how styles and SCSS files are loaded, React components can be rendered in a server-side Node environment (or used in tests that run in an environment similar to SSR). For examples of how to manage this, consult the documentation on server-side rendering.
• Fluent UI react can be used with server-side rendering (SSR) by using the appropriate libraries and techniques. This allows for improved performance and SEO for your application.

Advanced Usage

• See advanced documentation at npmjs.com for details on advanced usage, including module- vs path-based imports, using an AMD bundler like RequireJS, and deployment features.
• For more advanced usage, Fluent UI provides a range of utility functions and hooks that can be used to customize the behaviour and appearance of components. Additionally, Fluent UI React also provides a way to create custom components that can be used throughout your application.