This content originally appeared on DEV Community and was authored by Ronald Alves
Recentemente tive que implementar uma padronização de breakpoints para deixar responsivo uma aplicação.
Nessa aplicação usando o Material UI, a lib me traz uma série de valores de breakpoints já definidos, porém a ideia era centralizar esses valores em um único lugar..
1 -Foi criado o customHook "useSkillsMediaQuery".
Bom, com isso traz uma certa manutenibilidade e padronização bem mais definida e isolada.
Porém é difícil para debugar e reconhecer os valores de cada variável..
É ai que vem o useDebugValue..
2 - Com o useDebugValue eu passei um objeto informando o valor de cada variável em especifica e o valor de seu breakpoint, ou seja cada item do objeto possui um objeto e dentro desse objeto retorna 'true' ou 'false' informando se a tela se encaixa no seu valor, além de uma descrição informando a sua largura minima(min-width).
Entendeu, haha?
3 - Bom, inspecionando o componente onde o useSkillsMediaQuery foi chamado e ao diminuir ou aumentar a tela do navegador, usando o React DevTools é possivel ver essas informações.
Links:
useDebugValue:
https://pt-br.reactjs.org/docs/hooks-reference.html#usedebugvalue
Material UI BreakPoints:
https://mui.com/pt/customization/breakpoints/
React DevTools:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Espero ter contribuído na sua carreira!! 😃
This content originally appeared on DEV Community and was authored by Ronald Alves
Ronald Alves | Sciencx (2022-02-08T00:27:36+00:00) useDebugValue – O HOOK que vai te ajudar a debugar melhor!!. Retrieved from https://www.scien.cx/2022/02/08/usedebugvalue-o-hook-que-vai-te-ajudar-a-debugar-melhor/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.