-2

trying to figure out how to change the onclick on a div when in mobile view media in react,

Currently i have a modal onClick using a Hook on a div and want to remove it and attach another one that opens a new website like in mobile view just to the div.

using @media screen (max-width: 768px)

I'm using styled components also if that helps

Cheers

Nathan
  • 1
  • 3
  • The simplest way is to just check `window.innerHeight` when the click is triggered. But, even that isn't that simple if a mobile device is rotated in landscape or has a high pixel density it needs to be accounted for. There are [ways](https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) to detect if something is mobile but it can be unreliable. – DCTID Jan 29 '21 at 04:58
  • @DCTID I think you meant `window.innerWidth`. – terrymorse Jan 29 '21 at 05:02
  • Wouldn't the best way just to be conditionally render the function if it matches the media query inline? – Nathan Jan 30 '21 at 01:36
  • whats the best way to conditionally render a function inline, ive got let query = window.matchMedia("(max-width: 768px)") so if that is true then run the onclick? whats the syntax for react – Nathan Jan 30 '21 at 01:42

1 Answers1

1

There is a trick that you can use to access the breakpoints in javascript. Same can work in your scenario. I had used this approach before but for a javascript project. Below is a link for the same,

https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript

The whole idea is to make use of :before or :after pseudo selectors.

Sanish Joseph
  • 2,140
  • 3
  • 15
  • 28