Fluent UI React Insights: Positioning

Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system. In the first episode, engineers from the Fluent UI team explain issues related to implementing positioned UI controls by sharing the requirements and also telling the implementation story (with its caveats) related to React.js.
🔗 Links:
github.com/microsoft/fluentui
react.fluentui.dev/
📚 Chapters:
00:00 - Introduction
00:52 - Fluent UI versions
01:22 - Implementing Popup component in Fluent UI Northstar
02:28 - Requirements for positioning
03:05 - Why we choose Popper.js?
04:56 - Custom modifiers for positioning
08:10 - Problems with React refs
10:04 - Memory issues caused by double rendering in React
10:56 - useCallbackRef hook to prevent double rendering
12:47 - Summary
💡 References:
- #1 Fluent UI repository on GitHub - github.com/microsoft/fluentui
- #2 Popper.js documentation - popper.js.org
- #3 Pull request that implements Popup component in Semantic UI React - github.com/Semantic-Org/Seman...
- #4 Pull request that implements Popup component in Fluent UI React Northstar - github.com/microsoft/fluent-u...
- #5 Issue in react-popper about performance & re-renders - github.com/popperjs/react-pop...
- #6 Pull request that implements “autoSize” feature - github.com/microsoft/fluentui...
- #7 Pull request that implements “coverTarget” feature - github.com/microsoft/fluentui...
- #8 Pull request that implements fixes for positioning and focusable elements - github.com/microsoft/fluentui...
- #9 CodeSandbox that demonstrates an order of React effects with specific element layout - codesandbox.io/s/react-effect...
- #10 Implementation of “use-callback-ref” pattern - github.com/theKashey/use-call...
- #11 Pull request that implements “usePopper()” React hook - github.com/microsoft/fluentui...
- #12 RFC about integration of Popper.js to Fluent UI React v9 - github.com/microsoft/fluentui...
#fluentui #webdev #reactjs

[@zerinfalible8639]

Thanks for share it!

[@Mikairuu]

More of this 🙌🏼

[@nintros6770]

Great job!

[@quantume7143]

As a React and .Net developer I'm impressed ! Wow :)

[@PankajNikam]

Hi, can we expect Fluent UI components on Flutter?

[@terminator4974]

never

[@donalexey]

Fluent UI developed by Microsoft, Blazor - component based framework developed by Microsoft. Why there are no complete set of Fluent components for Blazor?

[@bkcy18]

Exactly.
No proper documentation too.

[@terminator4974]

blazor is shit hope they drop it fast

[@alexisnarvaez]

I switched from Fluent UI 8 React to Blazor and now returned to Fluent UI 9 again, mainly because of the lack of support for Blazor compared to the React one

[@Feronom]

because they are not using blazor for their apps, like teams etc

[@shishik123]

Ну всех собрали, своих нет ?