How to properly adapt a single page application to small screens?

Question

React

The bottom line is that if the screen width is less than a certain threshold, new buttons are added. Because on a large screen (assuming the use of a personal computer), there is a right and left mouse click. And on small screens (smartphone is supposed to be used), you need to make + and - buttons , which will replace pressing the right and left mouse buttons.
Keep the user's screen sizes in a Redux state, and render various components based on them? In this case, if the user starts resizing the browser, how to update the data?
What is the optimal solution?
UPD: made with react-sizeme

Answer 1

You can use react-responsive or something similar.

Answer 2

Think carefully, study the Google and Apple UI guidelines on small screen mobile devices. the interface of the desktop application and the mobile one is very different, otherwise it will be wildly inconvenient to use it.
On phones, instead of two buttons + - the norm is scrolling with a swipe across the screen. In general, finger gestures are a great direction for mobile interfaces, you can get even fewer buttons, and of course, expanding the entire screen with a left-to-right swipe (similar to bookmarks or as additional pagination). Also, the right mouse click on the finger-based interface is a long press (usually used for the context menu)