Understanding how to make React website mobile friendly

user_13145567 0
Viewed 9464

I've been playing around with react-responsive to understand how to make websites mobile-friendly. Essentially, what I want to do is pass in a value from a function that tests whether a viewing screen is sized like a mobile phone. Practically stolen from the documentation of react-responsive, I have a function in a file called Mobile.js as follows:

const Mobile = () => {
  const mobile = useMediaQuery({ query: '(max-width: 1000px)' })
  return (
    <div>
      {mobile && <p>You are sized like a mobile phone</p>}
    </div>
  );
}

However, what I want to be able to do is pass the boolean "mobile" into other classes in other js files where I can then use different CSS classNames depending on the value of this boolean.

I have 3 specific questions.

  1. How would I return the boolean mobile from the Mobile function to be used?

  2. How would I access this returned boolean?

  3. How would I change the className of a div depending on the value of this boolean?

Pretty new to web development (especially React) and these questions seem super simple and easy to solve, but for some reason, I just can't seem to figure it out by my own online research. Would love direct help and also some resources where I could learn more. Thank you so much!

To me, in a perfect world, the right code would look like this in my mind. Not sure how far off I am, but I was hoping maybe this could be of some guidance as to how I'm thinking.

In the function file,

// FILE Mobile.js
const Mobile = () => {
  const mobile = useMediaQuery({ query: '(max-width: 1000px)' })
  return (
    { mobile } // how to return a value?
  );
}

export default Mobile;

In another file,

// FILE OtherClass.js
import Mobile from './Mobile';
class OtherClass extends Component {

  constructor(props) {
    super(props);

    this.state = { mobile: <Mobile /> } // how to access the returned value?
  }


  render() {
    return (
      <div>
        {this.state.mobile && <div className="text-mobile">} // how to change the className depending on value?
        {!this.state.mobile && <div className="text-desktop">}
          blah blah blah blah blah
        </div>
      </div>
    );
  }
}
react-hooks reactjs
2 Answers

I might be misunderstanding but I think if I were to implement it according to the 3 questions you have it would be something like that:

const MyComponent = () => {
  // the point of using hooks is to use it whenever you need it (you "hook it")
  const isMobile = useMediaQuery({ query: '(max-width: 1000px)' });
  const textStyle = isMobile ? 'text-mobile' : 'text-mobile';

  return (
    <div className={textStyle}>
    enter code here
    </div>
  )
}

Hope this helps :)

Edit

To reuse this logic you can do a wrapper div component instead:

const MyWrapperComponent = (props) => {
  const isMobile = useMediaQuery({ query: '(max-width: 1000px)' });
  const textStyle = isMobile ? 'text-mobile' : 'text-mobile';

  return (
    <div className={textStyle}>
     {props.children}
    </div>
  )
}

// Then you can use it like so:

const HomePage = () => (
   <MyWrapperComponent>
     write the rest of the code here
   </MyWrapperComponent>
)

Children are a kind of props that are native to react, quite basically just means they are whatever you provide between the tags of the component that's receiving them :)

Hope this helps!

user_87455170

Thanks for asking and welcome to React development !

Here how I can help you

How would I return the boolean mobile from the Mobile function to be used?

How would I access this returned boolean?

Since you are calling a hook useMediaQuery, you need also a hook to reuse it and returns its value :

function useIsMobile() {
   const isMobile = useMediaQuery({ query: '(max-width: 1000px)' });
   return isMobile
}
//Then you can share this logic in other components
function Component1(){
   const isMobile = useIsMobile()
   ...
}
function Component2(){
   const isMobile = useIsMobile()
   ...
}

Please note that you can't use hooks inside class components.

How would I change the className of a div depending on the value of this boolean?

This is straightforward:

function Component(){
   const isMobile = useIsMobile()
   const className = isMobile ? 'mobile-class' : 'desktop-class'
   return <div className={className}>...</div>
}

If you need more complex className logic you can checkout the package classnames which makes it very easy to activate/deactivate classes.

user_66955690
Related