Responsividade em "Composition Pattern"
Bom dia, Boa tarde, Boa noite.
Estou seguindo meus estudos e tal, e recentemente comecei a desbravar "patterns" com foco maior em react/next!
E me surgiu uma indagação!
🔸Como ficaria a responsividade de um componente que segue esse tipo de pattern caso a situação for a seguinte:
-Um Header que possui uma Logo.
-So que essa logo tem 2 variaveis de Imagem, uma para resoluções maiorires ( mostra a logo com nome e tudo ), e uma para resoluções menores ( mostra apenas o icon ).
🔸Qual o ideal para uma responsividade nesse caso?
1-Usar useRef pra ver a largura do component e fazer uma condicional simples?
2-Usar apenas javascript do tipo "window.innerWidth <= 700" e "window.innerWidth >= 700".
3-Usar libs com hooks especificos, como : "react-resize-observer-hook" ou "useMediaQuery" do usehooks-ts, entre outros por ai...
4-Libs mais simples como : "React-Responsive"
5-Fazer 2 components repetidos, cada 1 com a respectiva imagem e fazer uma responsividade com css do tipo: "media tal display none em um deles"
6-Se n acha nenhum dos exemplos acima viáveis, aceito qualquer sugestão de dica,video,doc...
🔸OBS: sou novo na área gente, peguem leve comigo viu!!!!