🐳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