Stack Overflow
Stack Overflow

Questions tagged [fluentui-react]

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.

Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

311 questions
1
vote
1 answer

Breakpoints in Microsoft Fluent UI Northstar

Is there any way of using breakpoints in Microsoft's Fluent UI Northstar? While I acknowledge that they don't support mobile yet, even on desktop you have be responsive to window size changes.
SebastianR
  • 1,683
  • 2
  • 17
  • 33
1
vote
1 answer

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…
Gopal
  • 1,292
  • 3
  • 19
  • 41
1
vote
1 answer

Appending JSX Block Rather Than Repeating Block Based on Condition

In my React app I have a function that returns one block of JSX or another based on a condition. This works as expected. The thing is, the only difference between the two blocks is that in the second case an icon is included, to allow for clearing…
Muirik
  • 6,049
  • 7
  • 58
  • 116
1
vote
1 answer

Using `addEventListener` to add click event to icon within React component

I am trying to add an event listener to an icon in my React app, so that I can fire a function upon click of the icon specifically (a click on the surrounding TextField will not suffice). I need to do this manually, because there is no click…
Muirik
  • 6,049
  • 7
  • 58
  • 116
1
vote
1 answer

can I await for a state before parsing the data in react?

I have a custom hook that gets file data from the cache api based on an url. The hook works fine. Problem is that I get a response back and I need to parse this data before I can use the fabric tag picker. and I also only want to parse that data…
Ricardo Silva
  • 1,221
  • 9
  • 19
1
vote
1 answer

how to using a custom function to generate suggestions in fluent ui tag picker

I am trying to use the tagPicker from fluent ui. I am using as starting point the sample from the site: https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers The problem is that the object I have has 3 props. the objects in the array…
Ricardo Silva
  • 1,221
  • 9
  • 19
1
vote
1 answer

How to get FluentUI styling when using Gatsby Link component

I am using Microsoft's fluent ui starter kit for gatsby.js. If I use the gatsby Link component, then I do not get the styling of the FluentUI. But if I use the fluentui Link component, I do not get the behavior of the gatsyby link component, which…
shashi
  • 4,616
  • 9
  • 50
  • 77
1
vote
2 answers

Unable to install FluentUI packages for react app

I started learning React and FluentUI 2 hours back. I am trying out various tutorials available over internet but cannot just get through the FluentUI package installation step. I get the below error: npm i @fluentui/react npm ERR! code ERESOLVE npm…
Purbasha
  • 215
  • 2
  • 11
1
vote
2 answers

Fluent UI detailslist basic example how to pass items to the DetailsListBasicExample?

I am trying to use the Fluent UI Detailslist component from here I just copied the source code and have a (older) class based component which is called DetailsListBasicExample. the component extends React component, curly braces and an…
g00golplex
  • 397
  • 1
  • 6
  • 17
1
vote
0 answers

Fluent UI - Nav: possibility to expand to selectedKey

is there a possiblity to automatically expand the nav to the selectedKey? I am using a nested navigation, which would totally benefit from an automatic expand. And while i found a manual solution to iterate through the items, an built-in automatic…
Michael.Roger
  • 51
  • 4
1
vote
1 answer

How to reset a FluentUI Dropdown selection on a change somewhere else?

I'm using a FluentUI dropdown in a reactjs office addin and would like for it to be reset when the user types in a completely different textbox. Can I get a reference to the dropdown and call some reset function? It's a plain single-select dropdown…
unhammer
  • 4,306
  • 2
  • 39
  • 52
1
vote
1 answer

Localization in Fluent UI

I am trying to implement localization in react app using i18next and Fluent UI. As seen here - https://developer.microsoft.com/en-us/fluentui#/styles/web/localization The docs day "Fluent UI supports a variety of language codes, which map to the…
bharath
  • 111
  • 1
  • 2
  • 15
1
vote
2 answers

Fluent UI ComboBox allowFreeform

I have issues with a controlled ComboBox in fluentui from ms. I not been able to insert my own text, after insert and press enter the text disappears. The option selection works without problems. Here a codepen:…
VerHext
  • 23
  • 2
  • 7
1
vote
1 answer

How to correctly use Reach Router Links with a Fluent UI Nav

Is there a way to make the Fluent UI (formerly Office Fabric UI) Nav component correctly work replacing it's element links with a custom link such as from Reach Router? Fluent UI Nav provides an onRenderLink props but that only changes…
theycallmemorty
  • 12,515
  • 14
  • 51
  • 71
0
votes
0 answers

How to create groups for items by multiple keys in a DetailsList using FluentUI

I'm trying to greate grouped details list using FluentUI controls. I need function to create groups by multiple fields. My test items: let testItems = [ { "id": "ipofjfe98e9889r3", "orderName": "Steel", "clientName":…
Pavlo Kostanian
  • 1
1 2 3
…
20 21