How to use react-responsive - 10 common examples
To help you get started, we’ve selected a few react-responsive examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
gershonv / react-blog / src / views / web / home / index.jsx View on Github 
function Home(props) {
const [list, setList] = useState([])
const [total, setTotal] = useState(0)
const [loading, setLoading] = useState(false)
const [drawerVisible, setDrawerVisible] = useState(false)
const isGreaterThan1300 = useMediaQuery({
query: '(min-width: 1300px)'
})
// 当地址栏发生变化
useEffect(() => {
// componentDidMount props.location.search 发生变化 均执行以下代码
const params = decodeQuery(props.location.search)
fetchList(params)
/*eslint react-hooks/exhaustive-deps: "off"*/
}, [props.location.search])
function fetchList({ page, keyword }) {
const queryParams = { page, pageSize: 10 }
if (keyword) queryParams.keyword = keyword
setLoading(true)
axiosexport default function App() {
const isDesktopOrLaptop = useMediaQuery({
query: "(min-device-width: 1224px)"
});
const isBigScreen = useMediaQuery({ query: "(min-device-width: 1824px)" });
const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1224px)" });
const isTabletOrMobileDevice = useMediaQuery({
query: "(max-device-width: 1224px)"
});
const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
const isRetina = useMediaQuery({ query: "(min-resolution: 2dppx)" });
return (const Hero = () => {
const isBigScreen = useMediaQuery({ minWidth: `1100px` })
return (
<div>
Free & Open Source Gatsby Themes
Get <span>high-quality</span> and{` `}
<span>customizable</span> Gatsby themes to quickly bootstrap your website
Get monthly information about Gatsby Themes
</div>export default function useResponsive() {
const lessThanExtraSmall = useMediaQuery({
query: `(max-width: ${Media.xs}px)`,
});
const greaterThanExtraSmall = useMediaQuery({
query: `(min-width: ${Media.xs + 1}px)`,
});
const lessThanSmall = useMediaQuery({
query: `(max-width: ${Media.sm}px)`,
});
const greaterThanSmall = useMediaQuery({
query: `(min-width: ${Media.sm + 1}px)`,
});
const lessThanMedium = useMediaQuery({
query: `(max-width: ${Media.md}px)`,
});
const greaterThanMedium = useMediaQuery({
query: `(min-width: ${Media.md + 1}px)`,
});
const lessThanLarge = useMediaQuery({
query: `(max-width: ${Media.lg}px)`,const Header: React.FC<{ onNavToggle: () => void} > = ({ onNavToggle }) => {
const laptopOrBigger = useMediaQuery({ minWidth: 1400 });
return (
)}
logoProps={{
href: 'https://www.optaplanner.org',
target: '_blank',
rel: 'noopener noreferrer',
}}
toolbar={}
topNav={laptopOrBigger && }
showNavToggle={!laptopOrBigger}
onNavToggle={onNavToggle}
/>
);export default function useResponsive() {
const lessThanExtraSmall = useMediaQuery({
query: `(max-width: ${Media.xs}px)`,
});
const greaterThanExtraSmall = useMediaQuery({
query: `(min-width: ${Media.xs + 1}px)`,
});
const lessThanSmall = useMediaQuery({
query: `(max-width: ${Media.sm}px)`,
});
const greaterThanSmall = useMediaQuery({
query: `(min-width: ${Media.sm + 1}px)`,
});
const lessThanMedium = useMediaQuery({
query: `(max-width: ${Media.md}px)`,
});
const greaterThanMedium = useMediaQuery({
query: `(min-width: ${Media.md + 1}px)`,
});
const lessThanLarge = useMediaQuery({
query: `(max-width: ${Media.lg}px)`,
});
const greaterThanLarge = useMediaQuery({
query: `(min-width: ${Media.lg + 1}px)`,
});
return {function WebPagination({ total, current, onChange, pageSize, style = {} }) {
const isLessThan736 = useMediaQuery({
query: '(max-width: 736px)'
})
return (
<div style="{style}">
</div>
)
}const AdminLayout = ({
className,
logo,
children,
headerContent,
sidebarContent,
sidebarBreakpoint = 'md',
sidebarCollapsedWidth = 80,
sidebarWidth = 256,
sidebarTheme = 'dark',
}: AdminLayoutProps) => {
const useDrawer = useMediaQuery({ maxWidth: MAX_WIDTH_MAP[sidebarBreakpoint] });
const [isCollapsed, setIsCollapsed] = useState(false);
const toggleIsCollapsed = useCallback(() => setIsCollapsed(!isCollapsed), [isCollapsed]);
const [isDrawerVisible, setIsDrawerVisible] = useState(false);
const toggleIsDrawerVisible = useCallback(() => setIsDrawerVisible(!isDrawerVisible), [
isDrawerVisible,
]);
const toggle = useCallback(() => (useDrawer ? toggleIsDrawerVisible() : toggleIsCollapsed()), [
useDrawer,
toggleIsDrawerVisible,
toggleIsCollapsed,
]);
const sidebarState = getSidebarState({ useDrawer, isCollapsed, isDrawerVisible });export default function useResponsive() {
const lessThanExtraSmall = useMediaQuery({
query: `(max-width: ${Media.xs}px)`,
});
const greaterThanExtraSmall = useMediaQuery({
query: `(min-width: ${Media.xs + 1}px)`,
});
const lessThanSmall = useMediaQuery({
query: `(max-width: ${Media.sm}px)`,
});
const greaterThanSmall = useMediaQuery({
query: `(min-width: ${Media.sm + 1}px)`,
});
const lessThanMedium = useMediaQuery({
query: `(max-width: ${Media.md}px)`,
});
const greaterThanMedium = useMediaQuery({
query: `(min-width: ${Media.md + 1}px)`,const lessThanExtraSmall = useMediaQuery({
query: `(max-width: ${Media.xs}px)`,
});
const greaterThanExtraSmall = useMediaQuery({
query: `(min-width: ${Media.xs + 1}px)`,
});
const lessThanSmall = useMediaQuery({
query: `(max-width: ${Media.sm}px)`,
});
const greaterThanSmall = useMediaQuery({
query: `(min-width: ${Media.sm + 1}px)`,
});
const lessThanMedium = useMediaQuery({
query: `(max-width: ${Media.md}px)`,
});
const greaterThanMedium = useMediaQuery({
query: `(min-width: ${Media.md + 1}px)`,
});
const lessThanLarge = useMediaQuery({
query: `(max-width: ${Media.lg}px)`,
});
const greaterThanLarge = useMediaQuery({
query: `(min-width: ${Media.lg + 1}px)`,
});
return {
lessThanExtraSmall,
greaterThanExtraSmall,
lessThanSmall,
greaterThanSmall,
lessThanMedium,
greaterThanMedium,react-responsive
Media queries in react for responsive design
