npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

use-device-breakpoints

v1.2.0

Published

React `useDeviceHelper` hook to have different values for a variable based on a breakpoints and device specific information.

Downloads

3

Readme

Intro

React useDeviceHelper hook to have different values for a variable based on a breakpoints and device specific information.

This hook is nothing but a superset of a combination of the following two libraries:

Demo

TBA

Install

npm i use-device-helper

or

yarn add use-device-helper

Setup

Add provider

Add DeviceHelperProvider in your React tree.

import { DeviceHelperProvider } from 'use-device-helper'

...
    <DeviceHelperProvider>
        ...
    </DeviceHelperProvider>
...

Override default breakpoint settings

Click here to read how to override the default breakpoint settings.

Usage

const { isMobile, isSafari, isChrome, isMacOS, isWindows, isIPad, isIPhone } = useDeviceHelper()

You can also access the values with suffix and prefix, but you need to rename the variables because it contains invalid character: const { 'isMobile+': isMobile } = useDeviceHelper()

Component example

import { useDeviceHelper } from 'use-device-helper'

const MyCmp = () => {
    const columns = useDeviceHelper([1, 2], ['mobile', [2, 1]])

    return <Grid cols={columns} />
}

// Or using inline
const MyCmp = () => {
    return <Grid cols={useDeviceHelper([1, 2], ['mobile', [2, 1]])} />
}

Satisfies Component example

import { useDeviceHelper } from 'use-device-helper'

const MyCmp = () => {
    const { value: columns, satisfies } = useDeviceHelper([1, 2], ['mobile', [2, 1]], {
        windows: { 'internet-explorer': '>9' }
    })

    return satisfies ? <Flex /> : <Grid cols={columns} />
}

Other usages

With passing values

import { useDeviceHelper } from 'use-device-helper'

...

// Signature: useDeviceHelper(defaultValue, breakpointValues, satisfyObject?)
const example = useDeviceHelper(false, ['mobile', true])

// Example will be `true` if screen is mobile size.
// Example will be `false` otherwise

Satisfy condition

import { useDeviceHelper } from 'use-device-helper'

...

// Signature: useDeviceHelper(defaultValue, breakpointValues)
const { value, satisfy } = useDeviceHelper('none', ['mobile', 'is mobile'], {macos: {chrome: '>80'}})

// `value` will work like the example above.
// `satisfy` will return `true` only if device is a MacOS machine with Chrome 80+

Without passing values

In case you don't specify any value to the hook, it'll return a generated object including boolean values for each breakpoint keys that's being defined in options.

It'll return the following object with the basic setup.

{
    value?: any
    satisfies?: boolean
    userAgent: string
    isSafari: boolean
    isChrome: boolean
    isInternetExplorer: boolean
    isIE: boolean
    isOpera: boolean
    isFirefox: boolean
    isIOS: boolean
    isAndroid: boolean
    isMacOS: boolean
    isWindows: boolean
    isWindowsPhone: boolean
    isSamsungBrowser: boolean
    isKonqueror: boolean
    isLynx: boolean
    isIPhone: boolean
    isIPad: boolean
    isIPod: boolean
    isBlackberry: boolean
    isYandexBrowser: boolean
    isChromium: boolean
    browser: {
        name: string
        version: string
    }
    engine: {
        name: string
        version: string
    }
    os: {
        name: string
        version: string
        versionName: string
    }
    platform: {
        type: string
        vendor: string
        model: string
    }
    isLandscape: boolean
    isPortrait: boolean
    isHDPI: boolean
    isMicro: boolean
    isMobile: boolean
    isTablet: boolean
    isSmall: boolean
    isMedium: boolean
    isLarge: boolean
    'is-Micro': boolean
    'is|Micro': boolean
    'isMicro+': boolean
    'is-Micro+': boolean
    'is|Micro+': boolean
    'isMicro-': boolean
    'is-Micro-': boolean
    'is|Micro-': boolean
    'is-Mobile': boolean
    'is|Mobile': boolean
    'isMobile+': boolean
    'is-Mobile+': boolean
    'is|Mobile+': boolean
    'isMobile-': boolean
    'is-Mobile-': boolean
    'is|Mobile-': boolean
    'is-Tablet': boolean
    'is|Tablet': boolean
    'isTablet+': boolean
    'is-Tablet+': boolean
    'is|Tablet+': boolean
    'isTablet-': boolean
    'is-Tablet-': boolean
    'is|Tablet-': boolean
    'is-Small': boolean
    'is|Small': boolean
    'isSmall+': boolean
    'is-Small+': boolean
    'is|Small+': boolean
    'isSmall-': boolean
    'is-Small-': boolean
    'is|Small-': boolean
    'is-Medium': boolean
    'is|Medium': boolean
    'isMedium+': boolean
    'is-Medium+': boolean
    'is|Medium+': boolean
    'isMedium-': boolean
    'is-Medium-': boolean
    'is|Medium-': boolean
    'is-Large': boolean
    'is|Large': boolean
    'isLarge+': boolean
    'is-Large+': boolean
    'is|Large+': boolean
    'isLarge-': boolean
    'is-Large-': boolean
    'is|Large-': boolean
}

Rules-of-Hooks are still true in this case as well. Make sure your component will ALWAYS run it without any condition!

Modifiers

All breakpoint names coming with modifiers included.

Orientation prefix

  • `` (none): all
  • -: Landscape
  • |: Portrait

Range suffix

You can also control your value to behave as and up and and down.

  • `` (none): all
  • +: and up
  • -: and down

Examples

  • ['|mobile', 300]: on mobile, on portrait
  • ['|mobile+', 300]: on mobile and up, on portrait
  • ['mobile+', 300]: on mobile and up, both portrait and landscape
  • ['mobile', 300]: on mobile, both portrait and landscape
  • ['tablet-', 300]: on tablet and below, both portrait and landscape
  • ['mobile-', 300]: on mobile and down, both portrait and landscape

Disclaimer

This hook is nothing but a superset of a combination of the following two libraries:

FAQ

Is there any best practice suggestion?

Yes! Use as fewer hooks as possible. It's always faster to have a single isMobile variable and have simple conditions based on it. It's even better if you can solve your size related cases using pure CSS Media Queries.

Why not using an Object? Why the Array structure?

Object's cannot guarantee the order of the defined keys. It is crucial to check for values in the correct order because useBreakpoint uses eager evaluation and mediaQuery must maintain the defined order of the generated Media Queries.

Which rule is being prioritized?

The hook uses eager evaluation, so the first truthy breakpoint value gets returned.