open-index/open-npm huggingface dataset:
npm package: @heyanniemoran/responsive-media-query
Description: Made with create-react-library
Author: heyanniemoran
Latest version: 1.0.12

# @heyanniemoran/responsive-media-query

>

[![NPM](https://img.shields.io/npm/v/@heyanniemoran/responsive-media-query.svg)](https://www.npmjs.com/package/@heyanniemoran/responsive-media-query) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @heyanniemoran/responsive-media-query
```

## Usage
### Hook

```tsx
import React from 'react'
import { useMediaQuery } from '@heyanniemoran/responsive-media-query'

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1224px)'
  })
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return <div>
    <h1>Device Test!</h1>
    {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
    {isBigScreen && <p>You  have a huge screen</p>}
    {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
    <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
    {isRetina && <p>You are retina</p>}
  </div>
}
```

### Component

```tsx
import React from 'react'
import { MediaQuery } from '@heyanniemoran/responsive-media-query'

const Example = () => (
  <div>
    <h1>Device Test!</h1>
    <MediaQuery minWidth={1224}>
      <p>You are a desktop or laptop</p>
      <MediaQuery minWidth={1824}>
        <p>You also have a huge screen</p>
      </MediaQuery>
    </MediaQuery>
    <MediaQuery minResolution="2dppx">
      {(matches) =>
        matches
          ? <p>You are retina</p>
          : <p>You are not retina</p>
      }
    </MediaQuery>
  </div>
)
```

## License

MIT © [heyanniemoran](https://github.com/heyanniemoran)
npm package: @heyanniemoran/use-document-visibility
Description: >
Author: heyanniemoran
Latest version: 1.0.14

# use-document-visibility

>

[![NPM](https://img.shields.io/npm/v/use-document-visibility.svg)](https://www.npmjs.com/package/use-document-visibility) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm i @heyanniemoran/use-document-visibility
```

## Usage

```jsx
import React, { useEffect } from 'react'
import useDocumentVisibility from '@heyanniemoran/use-document-visibility'

const LeaveTabCounter = () => {
  const { count, visible, onVisibilityChange } = useDocumentVisibility();

  useEffect(() => {
    onVisibilityChange((isVisible) => {
      console.log('first handler', isVisible)
    });
    onVisibilityChange((isVisible) => {
      console.log('second handler', isVisible)
    });
  }, [])

  return (
    <div>
      <span>
        Вы покинули страницу: {count} раз
        Вкладка активна? {visible ? 'да' : 'нет'}
      </span>
    </div>
  );
};
```

## License

MIT © [heyanniemoran](https://github.com/heyanniemoran)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @heyanon/sdk
Description: [![Unit Tests](https://github.com/RealWagmi/heyanon-sdk/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/RealWagmi/heyanon-sdk/actions/workflows/unit-tests.yml) [![npm version](https://img.shields.io/npm/v/@heyanon/sdk/latest.svg)](https://
Author: HeyAnon
Latest version: 2.4.2

# HeyAnon SDK

[![Unit Tests](https://github.com/RealWagmi/heyanon-sdk/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/RealWagmi/heyanon-sdk/actions/workflows/unit-tests.yml)
[![npm version](https://img.shields.io/npm/v/@heyanon/sdk/latest.svg)](https://www.npmjs.com/package/@heyanon/sdk/v/latest)

This code is shared across HeyAnon TypeScript SDKs.