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:
https://github.com/microsoft/fluentui
https://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 - https://github.com/microsoft/fluentui
- #2 Popper.js documentation - https://popper.js.org
- #3 Pull request that implements Popup component in Semantic UI React - https://github.com/Semantic-Org/Seman...
- #4 Pull request that implements Popup component in Fluent UI React Northstar - https://github.com/microsoft/fluent-u...
- #5 Issue in react-popper about performance & re-renders - https://github.com/popperjs/react-pop...
- #6 Pull request that implements “autoSize” feature - https://github.com/microsoft/fluentui...
- #7 Pull request that implements “coverTarget” feature - https://github.com/microsoft/fluentui...
- #8 Pull request that implements fixes for positioning and focusable elements - https://github.com/microsoft/fluentui...
- #9 CodeSandbox that demonstrates an order of React effects with specific element layout - https://codesandbox.io/s/react-effect...
- #10 Implementation of “use-callback-ref” pattern - https://github.com/theKashey/use-call...
- #11 Pull request that implements “usePopper()” React hook - https://github.com/microsoft/fluentui...
- #12 RFC about integration of Popper.js to Fluent UI React v9 - https://github.com/microsoft/fluentui...


#fluentui #webdev #reactjs

• #science_technology
• #azure
• #microsoft
• #tech
• #technology
• #dev
• #development
• #cloud_computing
• #fluent_ui
• #web_dev
• #reactjs
• #react_js
• #fluent_ui_insights
• #positioning
• #fluent_ui_insights_positioning