Skip to content

Commit 12f3794

Browse files
committed
first commit
0 parents  commit 12f3794

File tree

9 files changed

+28857
-0
lines changed

9 files changed

+28857
-0
lines changed

.gitignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Project
2+
lib/
3+
4+
# OSX
5+
.DS_Store
6+
7+
# VSCode
8+
.vscode
9+
10+
# NodeJS
11+
node_modules/
12+
npm-debug.log
13+
yarn-error.log

.npmignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#Project
2+
src/
3+
4+
# OSX
5+
.DS_Store
6+
7+
# VSCode
8+
.vscode
9+
10+
# NodeJS
11+
node_modules/
12+
npm-debug.log
13+
yarn-error.log

LICENSE.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023-present, Johan Haneveld
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

README.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# react-native-media-query-hook
2+
3+
A simplified version of media queries in the browser. Currently supports minWidth, maxWidth, minHeight, maxHeight, and orientation to detect landscape or portrait modus. The hook is typescript first.
4+
5+
## Installation
6+
7+
_npm_
8+
9+
```shell
10+
$ npm i react-native-media-query-hook
11+
```
12+
13+
_yarn_
14+
15+
```shell
16+
$ yarn add react-native-media-query-hook
17+
```
18+
19+
## How to use
20+
21+
_import_
22+
23+
```typescript
24+
import useMediaQuery from 'react-native-media-query-hook';
25+
```
26+
27+
_basic_
28+
29+
```typescript
30+
// The outcome results in a boolean statement.
31+
const isSmallScreen = useMediaQuery({
32+
maxWidth: 480,
33+
});
34+
```
35+
36+
_more sophisticated queries_
37+
38+
```typescript
39+
// Detect different screen sizes
40+
const isSmallScreen = useMediaQuery({
41+
maxWidth: 480,
42+
});
43+
const isMediumScreen = useMediaQuery({
44+
minWidth: 481,
45+
maxWidth: 1024,
46+
});
47+
const islargeScreen = useMediaQuery({
48+
minWidth: 1025,
49+
});
50+
51+
// Detect portrait / landscape mode
52+
const isPortrait = useMediaQuery({
53+
orientation: 'portrait',
54+
});
55+
const isLandscape = useMediaQuery({
56+
orientation: 'landscape',
57+
});
58+
59+
// Put it all together
60+
const isMediumPortraitScreen = useMediaQuery({
61+
minWidth: 481,
62+
maxWidth: 1024,
63+
minHeight: 481,
64+
maxHeight: 1200,
65+
orientation: 'portrait',
66+
});
67+
```
68+
69+
## Contributing
70+
71+
[Issues reports](https://github.com/idlework/react-native-media-query-hook/issues) are more than welcome. The best way to report a problem is to add a reproduction of the error with a code example.
72+
73+
[Pull requests](https://github.com/idlework/react-native-media-query-hook/pulls) are also very welcome. This way we can extend the library quicker with everybody's needs. If you have ideas about the interface, lets discuss it in an [issue ticket](https://github.com/idlework/react-native-media-query-hook/issues).
74+
75+
## License
76+
77+
react-native-media-query-hook is [MIT licensed](./LICENSE).

0 commit comments

Comments
 (0)