React.js Media Queries to Show & Hide Elements Based on Screen Size Using react-use-media in JSX

npm i react-use-media

App.jsx

import React from 'react';
import { useMedia } from 'react-use-media';

const App = () => {
  const isWide = useMedia({ minWidth: 800 });

  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      {isWide ? (
        // Desktop View with Sidebar
        <>
          <aside style={{ width: '250px', backgroundColor: '#f0f0f0', padding: '1rem' }}>
            <h3>Sidebar</h3>
            <ul>
              <li>Dashboard</li>
              <li>Profile</li>
              <li>Settings</li>
            </ul>
          </aside>
          <main style={{ flex: 1, padding: '1rem' }}>
            <h2>Welcome to the Desktop View</h2>
            <p>This layout includes a sidebar because your screen is wide.</p>
          </main>
        </>
      ) : (
        // Mobile View with Toggle Menu
        <main style={{ padding: '1rem' }}>
          <h2>Welcome to Mobile View</h2>
          <button
            onClick={() => alert('Show mobile menu')}
            style={{ padding: '0.5rem 1rem', marginBottom: '1rem' }}
          >
            ☰ Menu
          </button>
          <p>This is a simplified view for smaller screens without a sidebar.</p>
        </main>
      )}
    </div>
  );
};

export default App;

import React from 'react';

import { useMedia } from 'react-use-media';

const App = () => {

const isWide = useMedia({ minWidth: 800 });

return (

{isWide ? (

// Desktop View with Sidebar

<h3>Sidebar</h3>

<ul>

<li>Dashboard</li>

<li>Profile</li>

<li>Settings</li>

</ul>

</aside>

<h2>Welcome to the Desktop View</h2>

<p>This layout includes a sidebar because your screen is wide.</p>

</main>

</>

) : (

// Mobile View with Toggle Menu

<h2>Welcome to Mobile View</h2>

<button

onClick={() => alert('Show mobile menu')}

style={{ padding: '0.5rem 1rem', marginBottom: '1rem' }}

☰ Menu

</button>

<p>This is a simplified view for smaller screens without a sidebar.</p>

</main>

)}

</div>

);

};

export default App;

React.js Media Queries to Show & Hide Elements Based on Screen Size Using react-use-media in JSX

Comments

Leave a Reply Cancel reply

Archives