wednesday-solutions / react-screentype-hook

React hook to get screen type(mobile, tablet, desktop, largeDesktop)

react-screentype-hook

React hook to dynamically get current screen type (mobile, tablet, desktop, largeDesktop)

Install

// with npm
npm install react-screentype-hook

// with yarn
yarn add react-screentype-hook

Sample Response

const screenType = useScreenType();
console.log(screenType);

  {
    isLargeDesktop: false,
    isDesktop: false,
    isMobile: true,
    isTablet: false
  }

How to use

Without custom breakpoints

import React from "react";
import useScreenType from "react-screentype-hook";

function App() {
  const screenType = useScreenType();

  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <img
        src={
          screenType.isMobile
            ? "https://picsum.photos/200/200"
            : "https://picsum.photos/400/400"
        }
      />
    </div>
  );
}

export default App;

With custom breakpoints

import React from "react";
import useScreenType from "react-screentype-hook";

function App() {
  const screenType = useScreenType({
    mobile: 400,
    tablet: 800,
    desktop: 1000,
    largeDesktop: 1600,
  });

  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <img
        src={
          screenType.isMobile
            ? "https://picsum.photos/200/200"
            : "https://picsum.photos/400/400"
        }
      />
    </div>
  );
}

export default App;

License

MIT