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.

github gershonv / react-blog / src / views / web / home / index.jsx View on Github external
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)
    axios
github expo / match-media / App.js View on Github external
export 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 (
github LekoArts / gatsby-themes / www / src / components / hero.tsx View on Github external
const Hero = () => {
  const isBigScreen = useMediaQuery({ minWidth: `1100px` })

  return (
    <div>
      
        
          
            
              Free &amp; 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>
github guilhermerodz / guilhermerodz.me / src / hooks / useResponsive.js View on Github external
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)`,
github kiegroup / optaweb-employee-rostering / employee-rostering-frontend / src / ui / header / Header.tsx View on Github external
const Header: React.FC&lt;{ onNavToggle: () =&gt; void} &gt; = ({ onNavToggle }) =&gt; {
  const laptopOrBigger = useMediaQuery({ minWidth: 1400 });
  return (
    
      )}
      logoProps={{
        href: 'https://www.optaplanner.org',
        target: '_blank',
        rel: 'noopener noreferrer',
      }}
      toolbar={}
      topNav={laptopOrBigger &amp;&amp; }
      showNavToggle={!laptopOrBigger}
      onNavToggle={onNavToggle}
    /&gt;
  );
github guilhermerodz / guilhermerodz.me / src / hooks / useResponsive.js View on Github external
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 {
github gershonv / react-blog / src / components / Pagination / index.jsx View on Github external
function WebPagination({ total, current, onChange, pageSize, style = {} }) {
  const isLessThan736 = useMediaQuery({
    query: '(max-width: 736px)'
  })
  return (
    <div style="{style}">
      
    </div>
  )
}
github Kamahl19 / react-starter / src / packages / admin-layout / AdminLayout.tsx View on Github external
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 });
github guilhermerodz / guilhermerodz.me / src / hooks / useResponsive.js View on Github external
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)`,
github guilhermerodz / guilhermerodz.me / src / hooks / useResponsive.js View on Github external
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

MIT
Latest version published 1 month ago

Package Health Score

84 / 100
Full package analysis