UI issues for dekstop vs mobile views


I have 2 questions related to this, using React as the view layer.

1 - What’s the best way to show a different layout for mobile clients?

Is the best option to do the following inside render() ?

if (mobile)
return < MobileView> … </>
return < DesktopView> … </>

This would also have to be done in relevant child components but seems the most straight forward.

2 - Handle Mouse/Click events

I want to display a mouseover UI on desktop, with some added functionality (e.g. Netflix’s popover with add to queue) and replace that with a select/toggle on mobile.

Is there a good pattern for this or a react component which can be used easily? e.g. if use TapEventPlugin I can use onTouchTap, then I also have to conditionally handle onClick, mouseEnter, mouseOut etc, and conditionally combine all of them.

The same logic applies to showing a hover dropdown menu. I’m hoping there’s a pattern/component to handle this nicely?


good question. I’m struggling with the same issue. You find a good approach?