Fluent UI React Insights: Positioning

From the creator

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/Semantic-UI-React/pull/570 - #4 Pull request that implements Popup component in Fluent UI React Northstar - https://github.com/microsoft/fluent-ui-react/pull/150 - #5 Issue in react-popper about performance & re-renders - https://github.com/popperjs/react-popper/issues/185 - #6 Pull request that implements “autoSize” feature - https://github.com/microsoft/fluentui/pull/17159 - #7 Pull request that implements “coverTarget” feature - https://

Published 2022-07-21 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.