https://github.com/wednesday-solutions/react-screentype-hook

React hook to get screen type(mobile, tablet, desktop, largeDesktop)
https://github.com/wednesday-solutions/react-screentype-hook

custom-breakpoints desktop mobile react react-hook screen-type tablet

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/wednesday-solutions/react-screentype-hook
• Owner: wednesday-solutions
• License: mit
• Created: 2020-05-07T08:53:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T16:43:15.000Z (almost 2 years ago)
• Last Synced: 2024-07-31T07:15:53.572Z (4 months ago)
• Topics: custom-breakpoints, desktop, mobile, react, react-hook, screen-type, tablet
• Language: JavaScript
• Homepage: https://wednesday.is/building-products/?utm_source=github&utm_medium=react-screentype-hook
• Size: 1.05 MB
• Stars: 12
• Watchers: 5
• Forks: 8
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `useScreenType`
• awesome-react-hooks-cn - `useScreenType`
• awesome-react-hooks - `useScreenType`
• awesome-react-hooks - `useScreenType`

README

        
# react-screentype-hook

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

![](react-screentype-hook.svg)

## Install

```sh

// with npm

npm install react-screentype-hook

// with yarn

yarn add react-screentype-hook

```

## Sample Response

```javascript

const screenType = useScreenType();

console.log(screenType);

```

```

  {

    isLargeDesktop: false,

    isDesktop: false,

    isMobile: true,

    isTablet: false

  }

```

## How to use

### Without custom breakpoints

```javascript

import React from "react";

import useScreenType from "react-screentype-hook";

function App() {

  const screenType = useScreenType();

  return (

    


      

    

  );

}


export default App;

```

### With custom breakpoints

```javascript

import React from "react";

import useScreenType from "react-screentype-hook";

function App() {

  const screenType = useScreenType({

    mobile: 400,

    tablet: 800,

    desktop: 1000,

    largeDesktop: 1600,

  });

  return (

    


      

    

  );

}


export default App;

```

## License

[MIT](LICENSE)