0.4.9 • Published 3 years ago
@react-native-extra/media-query v0.4.9
Media query
This library contains media query hooks and media query components that can ease the development of responsive design in react native and react.
Sections
The library is divided in 4 parts:
useMediaQuery hook and OnMediaQuery component
Create media query hooks and components from string
Create media query hooks and components from context
useMediaQuery hook and OnMediaQuery component
Example on how to use useMediaQuery hook and OnMediaQuery component
import React from "react";
import { View, Text } from "react-native";
import { useMediaQuery, OnMediaQuery } from "@react-native-extra/media-query";
export const Root = () => {
const isPortrait = useMediaQuery("(orientation: portrait)");
return (
<>
<Text>
{isPortrait
? "Portrait"
: "Landscape"}
</Text>
<OnMediaQuery
query="(orientation: portrait)">
<Text>
Portrait
</Text>
</OnMediaQuery>
</>
);
};
Create media query hooks and components from string
You could also create media query components or hooks from strings
import React from "react";
import { View } from "react-native";
import {
createMediaQueryHookFromString,
createMediaQueryComponetFromString,
}
from "@react-native-extra/media-query";
const OnLaptop = createMediaQueryComponetFromString("(min-width: 1128px)");
const useOnLaptop = createMediaQueryHookFromString("(min-width: 1128px)");
export const Root = () => {
const isOnLaptop = useOnLaptop();
return (
<>
<Text>
{isOnLaptop
? "On laptop"
: "Not on laptop"}
</Text>
<OnLaptop>
<Text>
Laptop
</Text>
</OnLaptop>
</>
);
};
Create media query hooks and components from context
You could also create media query components or hooks from a context. The context must be an object. That has property named breakpoints. The breakpoint property has the value of an object whose keys are the breakpoint name and values are media query string.
import React, { createContext } from "react";
import { View } from "react-native";
import {
createMediaQueryHookFromContext,
createMediaQueryComponetFromContext
}
from "@react-native-extra/media-query";
const ThemeContext = createContext({
breakpoints: {
portrait: "(orientation: portrait)",
landscape: "(orientation: landscape)",
}
});
const useOnBreakpoint = createMediaQueryHookFromContext(ThemeContext);
const OnBreakpoint = createMediaQueryComponetFromContext(ThemeContext);
export const Root = () => {
const isPortrait = useOnBreakpoint("portrait");
const isLandscape = useOnBreakpoint("landscape");
return (
<>
{isPortrait &&
<Text>
Portrait
<Text>}
{isLandscape &&
<Text>
Landscape
<Text>}
<OnBreakpoint
breakpoint="portrait">
<Text>
Portrait
</Text>
</OnBreakpoint>
<OnBreakpoint
breakpoint="landscape">
<Text>
Landscape
</Text>
</OnBreakpoint>
</>
);
};