-
this is a custom React hook that returns true or false depending if the screen is a mobile size or not.
-
this hook is best used with styled component tools like stylized components. In the styled component file you can use a prop to determine the style.
export default styled.div` background-color: ${props => props.isMobile ? 'lightgreen' : 'lightblue' }; `
-
in the react component you can then use the hook to determine whether or not the component is within the mobile view via the hook, and then pass that value as a prop.
<StyledApp isMobile={isMobile}> {isMobile ? <div>MOBILE</div> : <div>DESKTOP</div>} </StyledApp>