https://github.com/nallenscott/windshear

React hook for just-in-time component rendering, with first-class support for Tailwind CSS ⛵️
https://github.com/nallenscott/windshear

breakpoints hooks just-in-time media-queries pinpoint-accuracy react react-hooks tailwind-css viewport-dimensions

Last synced: 4 months ago
JSON representation

React hook for just-in-time component rendering, with first-class support for Tailwind CSS ⛵️

• Host: GitHub
• URL: https://github.com/nallenscott/windshear
• Owner: nallenscott
• License: bsd-3-clause
• Created: 2022-07-17T23:09:54.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-06T18:23:10.000Z (9 months ago)
• Last Synced: 2024-09-28T13:42:13.696Z (4 months ago)
• Topics: breakpoints, hooks, just-in-time, media-queries, pinpoint-accuracy, react, react-hooks, tailwind-css, viewport-dimensions
• Language: JavaScript
• Homepage:
• Size: 1.35 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  


  windshear




Windshear is a React hook for just-in-time component rendering, with first-class support for [Tailwind CSS](https://tailwindcss.com/docs). Easily bind visibility and other events to viewport dimensions and breakpoints with pinpoint accuracy.

## Installation

```

npm install windshear

```

## Usage

### Viewport dimensions

Windshear provides realtime viewport information that can be used to control the visibility of components or any feature that relies on the width/height of the viewport. Just call `useViewport`, and Windshear will continuously update the `currentWidth` and `currentHeight` properties using the global `window.innerWidth` and `window.innerHeight` for desktop browsers, and `window.screen.width` and `window.screen.height` for mobile browsers.

```js

import { useViewport } from 'windshear'

export default function Component () {

  const viewport = useViewport()

  return (

    <>

      {

        viewport.currentWidth > 1280 ?

          (
ComponentA
) :

          (
ComponentB
)

      }

    >

  )

}

```


### Tailwind breakpoints

Windshear accepts breakpoint definitions using the [Tailwind breakpoint schema](https://tailwindcss.com/docs/breakpoints). Simply drop your breakpoints into `useViewport`, and Windshear will continuously update the `activeBreakpoint` property with the key of the active breakpoint. Supports Tailwind's standard, max-width, and multi-range breakpoints.

```js

import { screens } from 'tailwindcss/defaultTheme'

import { useViewport } from 'windshear'

export default function Component () {

  const viewport = useViewport(screens)

  return (

    <>

      {

        viewport.activeBreakpoint === 'lg' ?

          (
ComponentA
) :

          (
ComponentB
)

      }

    >

  )

}

```


### Mobile user agents

Windshear provides basic detection for mobile user agents, and currently supports user agent strings containing the keywords Android, webOS, iPhone, iPad, iPod, or BlackBerry.

```js

import { useViewport } from 'windshear'

export default function Component () {

  const viewport = useViewport()

  return (

    <>

      {

        viewport.isMobileAgent ?

          (
ComponentA
) :

          (
ComponentB
)

      }

    >

  )

}

```