Sign in to confirm you’re not a bot

This helps protect our community. Learn more

Sign in

Fluent UI React Insights: Positioning

Microsoft Developer

Microsoft Developer

Verified

588K subscribers

<__slot-el>

Subscribe

<__slot-el>

Subscribed

175

Share

Save

16K views 2 years ago #reactjs #webdev #fluentui

16,680 views • Jul 20, 2022 • #reactjs #webdev #fluentui

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:  …...more

...more

Comments 12

Top comments

Newest first

Chapters

Introduction

0:00

Fluent UI versions

0:52

Implementing Popup component in Fluent UI Northstar

1:22

Requirements for positioning

2:28

Why we choose Popper.js?

3:05

Custom modifiers for positioning

4:56

Problems with React refs

8:10

Memory issues caused by double rendering in React

10:04

useCallbackRef hook to prevent double rendering

10:56

Summary

12:47

Sync to video time

Description

Fluent UI React Insights: Positioning

175Likes

16,680Views

2022Jul 20

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

Chapters

View all

Introduction

0:00

Fluent UI versions

0:52

Implementing Popup component in Fluent UI Northstar

1:22

Requirements for positioning

2:28

Transcript

Follow along using the transcript.

Show transcript

Microsoft Developer

588K subscribers

Videos

About

Facebook

Transcript

14:24

Now playing

Fluent UI React Insights: Styling

Microsoft Developer

Microsoft Developer

Verified

•

9.3K views 2 years ago

41:01

Now playing

Modern Full-Stack Web Development with ASP.NET Core & Blazor | OD533

Microsoft Developer

Microsoft Developer

Verified

•

42K views 11 months ago

15:10

Now playing

Fluent UI React Insights: Griffel

Microsoft Developer

Microsoft Developer

Verified

•

4.9K views 2 years ago

8:55

Now playing

10 React Antipatterns to Avoid - Code This, Not That!

Fireship

Fireship

Verified

•

814K views 3 years ago

13:23

Now playing

Stop designing your user interface? 😱

Scott Durow

Scott Durow

•

21K views 1 year ago

14:25

Now playing

Is Blazor Better than React?

Gavin Lon

Gavin Lon

•

61K views 1 year ago

13:24

Now playing

Fluent UI React Insights: Accessible by default

Microsoft Developer

Microsoft Developer

Verified

•

2.9K views 1 year ago

13:14

Now playing

Fluent UI React Insights: Theming in v9

Microsoft Developer

Microsoft Developer

Verified

•

4K views 2 years ago

2:46:38

Now playing

React State Management – Intermediate JavaScript Course

freeCodeCamp.org

freeCodeCamp.org

Verified

•

345K views 2 years ago

16:30

Now playing

Frontend Nation 2024: Tejas Kumar - Getting Fluent with React

Vue School

Vue School

•

644 views 10 months ago

21:26

Now playing

Fluent UI React Trainings: Styling best practices and icons

Microsoft Developer

Microsoft Developer

Verified

•

4.5K views 1 year ago

21:34

Now playing

Exploring the Fluent Design System

Microsoft Developer

Microsoft Developer

Verified

•

10K views 6 years ago

21:40

Now playing

Fluent UI React Trainings: Core concepts, state management & Triggers API

Microsoft Developer

Microsoft Developer

Verified

•

4.8K views 1 year ago

1:20:55

Now playing

ASP.NET Community Standup: Fluent UI Blazor

dotnet

dotnet

•

19K views Streamed 1 year ago

26:42

Now playing

Mixture of Experts Explained: From Vowel Recognition to Trillion-Parameter LLMs (Llama 4, DeepSeek)

Julia Turc

Julia Turc

•

657 views 9 hours ago

New

1:20:04

Now playing

React Tutorial for Beginners

Programming with Mosh

Programming with Mosh

Verified

•

4.3M views 2 years ago

24:25

Now playing

Fluent 2: Designing Teams apps that seamlessly integrate experiences across Microsoft | OD18

Microsoft Developer

Microsoft Developer

Verified

•

9.1K views 1 year ago

24:03

Now playing

Top 10 .NET Trends in 2024

Gavin Lon

Gavin Lon

•

4K views 1 year ago

14:20

Now playing

What is the best software testing strategy?

ivelum

ivelum

•

3.4K views 13 days ago

9:19

Now playing

Fluent UI React v9: what's new and different

Microsoft Developer

Microsoft Developer

Verified

•

7.5K views 2 years ago