For those browsers, you might need to look for a more rudimentary solution. If you've faced this issue in the past then give the Resize Observer a go, it has reasonable support across browsers except for IE, Edge and Safari. This is just an example hook for a problem I've faced before when trying to create more reusable and responsive components.
const size = useResponsiveBreakpoints(targetRef, [ When the element has a width of 350, the breakpoint will be medium when it's 590 it will be large and so on. Each breakpoint contains a single key so we can use the names however we want, and a value. The hook can be used like so, the first argument is our element. contentRect setBreakSize( findBreakPoint(breakpoints, width)) export default function useResponsiveBreakpoints( elRef, breakpoints) = entries. In this example, I only care about a single element but it's perfectly reasonable to watch multiple elements if you need to. I created the useResponsiveBreakpoints hook which accepts the ref of the element we want to observe size changes on and a list of named breakpoints. To achieve this, a custom hook will provide an easy to use API we can reuse. Let's take a look at the scenario I described above. The same component in different places on the page can respond to size changes based on the parent and not the whole viewport. Instead, we could define the breakpoints we want our component to use and adjust the layout accordingly. Making responsive components is challenging because you can only do so much with media queries. Want to see it in action? Take a look at the demo. The advantage of this API over media queries is the ability to watch to particular elements rather than the entire screen. The Resize Observer API allows you to detect when a particular element changes size and how large it is. The Resize Observer API fits this purpose much better. This a great tool but it doesn't give us any flexibility when working with React components.
You may be familiar with media queries, a great way to adapt the layout based on the screen size or device properties. The promise of the web is to make information accessible to everyone and part of this goal means supporting different devices in an elegant way. There are many APIs that make the web a powerful platform, so why not take advantage of some of them and learn how you can integrate them with React.
0 kommentar(er)
