# @doux/react-responsive

> ____ stack: js, react, typescript

Latest version **0.1.3** (published 2022-07-15) · 0 weekly downloads

## Install

```sh
npm install @doux/react-responsive
pnpm add @doux/react-responsive
yarn add @doux/react-responsive
bun add @doux/react-responsive
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2022-07-15 |
| First published | 2022-07-07 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | doux |

## Links

- npm: https://www.npmjs.com/package/@doux/react-responsive
- Repository: https://github.com/ZzhangFun/react-responsive
- Homepage: https://github.com/ZzhangFun/react-responsive#readme
- Issues: https://github.com/ZzhangFun/react-responsive/issues
- npm.io page: https://npm.io/package/@doux/react-responsive

## Recent versions

- 0.1.3 (latest) — 2022-07-15
- 0.1.2 — 2022-07-14
- 0.1.1 — 2022-07-14
- 0.1.0 — 2022-07-14
- 0.0.5 — 2022-07-11
- 0.0.4 — 2022-07-11
- 0.0.3 — 2022-07-11
- 0.0.2 — 2022-07-07

## README

# by Doux
## v. 0.1.2
____
stack:
    js,
    react,
    typescript

bundler:
    microbundle(*rollup*)

that's npm module
____
use command npm install
____
## **Example**
```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import MediaQuery, { useMediaQuery } from "../src/react-responsive";




export const App = () => {

  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>}

      <MediaQuery minWidth={1224} maxHeight={2000}>
        <p>You are a desktop or laptop</p>
        <MediaQuery minWidth={1824}>
          <p>You also have a huge screen</p>
        </MediaQuery>
      </MediaQuery>
      <MediaQuery minResolution="2dppx">{/* @media (-webkit-min-device-pixel-ratio: 2) */}
        {/* You can also use a function (render prop) as a child */}
        {(matches) =>
          matches ? <p>You are retina</p> : <p>You are not retina</p>
        }
      </MediaQuery>
    </div>
  );
};




const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(<App />);
```

---
_Source: https://npm.io/package/@doux/react-responsive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._