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
7
votes
3 answers

How to get SSR to work with fluentui /Remix run?

How to install fluent UI react with remix run? I believe this is important enough to be addressed here, as it is a stumbling block in the adoption of office-UI-fabric-react in the community.
surendar
  • 87
  • 1
  • 8
5
votes
1 answer

Support callback for changing another field value when using React Hook Form validation

TL;DR This works: https://codesandbox.io/s/stoic-beaver-ucydi After refactor with React Hook Form this does not work: https://codesandbox.io/s/objective-cloud-bkunr?file=/src/ControlledTextField.tsx Long story Without React Hook Form (works…
Mariusz Ignatowicz
  • 1,445
  • 2
  • 20
  • 41
4
votes
1 answer

Why are Fluent UI react and Fluent UI web components libraries different?

Not sure it's the right question for this forum, but I couldn't find another place for it. Our design team built their design system based on fluent ui libraries as described here. They downloaded the design from here. Unfortunately, our engineering…
Shachar Har-Shuv
  • 666
  • 6
  • 24
4
votes
1 answer

Dropdown menu with item IDs in FluentUI/react-northstar

I am currently trying to make a dropdown with help of the FluentUI/react-northstar Dropdown component. Unfortunately the items prop for this component only has a string[] for the rendered names in the dropdown, but I need a key as well. I tried to…
IngoH
  • 159
  • 7
4
votes
1 answer

Is there a way to make a DetailsList header text wrap in Fluent UI?

I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated. See this codepen. Is there any way to…
Bujar Murati
  • 43
  • 1
  • 3
4
votes
1 answer

How to remove or handle icons were reregistered warning in react?

warning- react_devtools_backend.js:2273 Some icons were re-registered. Applications should only call registerIcons for any given icon once. Redefining what an icon is may have unintended consequences. Duplicates include: GlobalNavButton,…
Sarfraj Ansari
  • 119
  • 2
  • 11
3
votes
0 answers

How do I create a sticky (non scrollable) header/footer in a FluentUI modal control?

Using a React Fluent UI Modal Control, could someone please show me how to: Ensure the header and footer are not part of the scrollable content (i.e. they are 'sticky', while the main content sitting between them is scrollable if the window size is…
Brent
  • 4,611
  • 4
  • 38
  • 55
3
votes
0 answers

Hook problems when using @fluentui/react

I'm trying to use the Link component in @fluentui/react, but I get an error about invalid hook calls. I tried using Link in office-ui-fabric-react, but got same hook error. Background: Component A calls the code with the Link component. Component A…
Thuy
  • 1,493
  • 1
  • 11
  • 11
3
votes
2 answers

Getting issue while implementing FluentUI using SPFx in SharePoint online

I am following this blog to implement the fluentUI in SPFX part, but while doing "Gulp Build" I'm getting the following error: Error - [tsc] node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.d.ts(9,38): error TS1005: ';'…
Kailash Sahoo
  • 139
  • 1
  • 5
3
votes
0 answers

How to obtain ref of Stack

Stack doesn't expose either componentRef or ref property. How can we obtain react ref to it? In my scenario, I want to use it with useResponsiveMode. A workaround is to wrap Stack with a parent div.
qxg
  • 6,955
  • 1
  • 28
  • 36
3
votes
2 answers

Adding Function Reference to IconProps in React App

In my React app I am using react-fluent-ui to handle a lot of the styling. In one block in my class-based component I am using a TextField for a filter element. I have also included a clear icon within the TextField so that the user can click it to…
Muirik
  • 6,049
  • 7
  • 58
  • 116
3
votes
1 answer

Custom Teams theming with fluentui/-react-northstar

Docs for fluentui-react-northstar theming can be found here. I am struggling to understand how to make use of a custom theme. It seems I need one provider for the Teams base theme, and then a nested one for my own theme (which may well be wrong) …
jwccit
  • 31
  • 2
2
votes
1 answer

FluentUI React v9 Combobox - Unable to set component width

Is there some way to specify width of the Fluent UI Combobox component (@fluentui/react-components)? For other input elements it can be set using style={{width: "123px"}} (not sure if that's the recommended way though), but that does not work with…
Bohdan
  • 1,987
  • 16
  • 23
2
votes
1 answer

Prevent contextmenu on details list group headers in fluentui

I have a details list
Audrius Šaučiūnas
  • 89
  • 1
  • 5
2
votes
0 answers

TypeScript for defaultRender on FluentUI

I use Fluent UI. I have a DetailsList component, and I used ScrollablePane to make the Header always on the top. After I used ScrollablePane, I had typescript error. I couldn't find any proper solutions to fix it. Is there a way to fix…
Ozan Bilgiç
  • 215
  • 1
  • 9
1
2 3
…
20 21