From 4717de6bbe7ee307f84d302e2395ca4d3a0b3d92 Mon Sep 17 00:00:00 2001 From: GregdTd Date: Sun, 26 Nov 2023 19:31:07 +0100 Subject: [PATCH] Replace react-responsive with react-use useMedia hook --- package.json | 2 +- src/App.tsx | 2 + src/components/NavigationBar.tsx | 4 +- src/pages/Housing.tsx | 26 ++++ yarn.lock | 203 ++++++++++++++++++++++++++----- 5 files changed, 204 insertions(+), 33 deletions(-) create mode 100644 src/pages/Housing.tsx diff --git a/package.json b/package.json index 9d7a552..fba887a 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ "prettier": "^3.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-responsive": "^9.0.2", "react-scroll": "^1.9.0", + "react-use": "^17.4.0", "styled-components": "^6.1.1" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index 784e7b7..b440516 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import { ConfigProvider } from 'antd' import { NavigationBar } from './components/NavigationBar' +import { Housing } from './pages/Housing' import { Place } from './pages/Place' import { Welcome } from './pages/Welcome' import { Colors } from './styles/color' @@ -21,6 +22,7 @@ export const App = () => ( + ) diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx index 2571ca3..c11c986 100644 --- a/src/components/NavigationBar.tsx +++ b/src/components/NavigationBar.tsx @@ -2,7 +2,7 @@ import { MenuOutlined } from '@ant-design/icons' import { Button, Drawer, Layout } from 'antd' import { Header as BaseHeader } from 'antd/es/layout/layout' import { useState } from 'react' -import { useMediaQuery } from 'react-responsive' +import { useMedia } from 'react-use' import styled from 'styled-components' import { Menu } from './Menu' @@ -13,7 +13,7 @@ export const NavigationBar = () => { const showDrawer = () => { setOpen(!open) } - const isTabletOrMobile = useMediaQuery({ maxWidth: 800 }) + const isTabletOrMobile = useMedia(`screen and (max-width: 1024px)`) return (