π³React-responsive library!
npm install react-responsive
Context:
here if screen size is small then I just want to show just show upto id 6..else show all id
import React from "react";
import { useMediaQuery } from "react-responsive";
import {
FaGithub,
FaLinkedin,
FaInstagram,
FaMedium,
FaFacebook,
FaEnvelope,
FaYoutube,
} from "react-icons/fa";
import { Fade } from "react-awesome-reveal";
function SocialLinks() {
const isSmallScreen = useMediaQuery({ query: "(max-width: 500px)" });
const socialLinks = [
{
id: 1,
child: (
<>
Linkedin <FaLinkedin size={35} />
</>
),
href: "https://www.linkedin.com/in/mridul-saha-3a8b3a1b1/",
style: "rounded-tr-md",
},
{
id: 2,
child: (
<>
GitHub <FaGithub size={35} />
</>
),
href: "https://www.linkedin.com/in/mridul-saha-3a8b3a1b1/",
},
{
id: 3,
child: (
<>
Instagram <FaInstagram size={35} />
</>
),
href: "https://www.linkedin.com/in/mridul-saha-3a8b3a1b1/",
style: "rounded-br-md",
},
{
id: 4,
child: (
<>
Facebook <FaFacebook size={35} />
</>
),
href: "https://www.linkedin.com/in/mridul-saha-3a8b3a1b1/",
style: "rounded-br-md",
},
{
id: 5,
child: (
<>
Medium <FaMedium size={35} />
</>
),
href: "https://www.linkedin.com/in/mridul-saha-3a8b3a1b1/",
style: "rounded-br-md",
},
{
id: 6,
child: (
<>
YouTube <FaYoutube size={35} />
</>
),
href: "https://www.linkedin.com/in/mridul-saha-3a8b3a1b1/",
style: "rounded-br-md",
},
{
id: 7,
child: (
<>
YouTube <FaEnvelope size={35} />
</>
),
href: "https://www.linkedin.com/in/mridul-saha-3a8b3a1b1/",
style: "rounded-br-md",
},
];
const linksToShow = isSmallScreen ? socialLinks.slice(0, 6) : socialLinks;
return (
<div className="flex-col top-[14%] md:top-[23%] absolute left-0">
<ul>
{linksToShow.map(({ id, child, herf }) => (
<Fade delay={300}>
<li
key={id}
className="flex items-center rounded justify-center mb-2 w-56 px-8 pr-4 bg-gray-600 text-2xl h-14 ml-[-160px] hover:ml-[-10px] hover:rounded-md duration-300"
>
<a
href={herf}
className="flex items-center justify-between w-full text-white"
target="_blank"
rel="noreferrer"
>
{child}
</a>
</li>
</Fade>
))}
</ul>
</div>
);
}
export default SocialLinks;
Last updated