Episode
Fluent UI React Insights: Positioning
with Oleksandr Fediashov
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.
Chapter markers
- 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
Recommended resources
- Fluent UI repository on GitHub
- Popper.js documentation
- Pull request that implements Popup component in Semantic UI React
- Pull request that implements Popup component in Fluent UI React Northstar
- Issue in react-popper about performance & re-renders
- Pull request that implements “autoSize” feature
- Pull request that implements “coverTarget” feature
- Pull request that implements fixes for positioning and focusable elements
- CodeSandbox that demonstrates an order of React effects with specific element layout
- Implementation of “use-callback-ref” pattern
- Pull request that implements “usePopper()” React hook
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.
Chapter markers
- 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
Recommended resources
- Fluent UI repository on GitHub
- Popper.js documentation
- Pull request that implements Popup component in Semantic UI React
- Pull request that implements Popup component in Fluent UI React Northstar
- Issue in react-popper about performance & re-renders
- Pull request that implements “autoSize” feature
- Pull request that implements “coverTarget” feature
- Pull request that implements fixes for positioning and focusable elements
- CodeSandbox that demonstrates an order of React effects with specific element layout
- Implementation of “use-callback-ref” pattern
- Pull request that implements “usePopper()” React hook
Video URL
HTML iframe
Have feedback? Submit an issue here.