@opensea/react-media

Javascript library to deal with media queries in isomorphic React applications.

1.0.9-rc1

npm

Version published: 2 years ago

Weekly downloads: 117

Maintainers: 9

Weekly downloads

Created: 2 years ago

Source

react-media

@opensea/react-media is a Javascript library to deal with media queries in isomorphic React applications.

Its heavily inspired by https://github.com/artsy/fresnel but is compatible with React 18.

Installation

npm

npm i @opensea/react-media

yarn

yarn add @opensea/react-media

Usage

// media.ts

import { createMedia } from "@opensea/react-media"

const {
  createMediaStyle,
  Media,
  SizeProvider,
  breakpoints,
  useSizeContextSelector,
} = createMedia({
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  "2xl": 1536,
  container: 1600,
  "3xl": 1910,
})

export const mediaStyle = createMediaStyle()

export { Media, breakpoints, useSizeContextSelector }

// ComponentX.react.tsx

export function ComponentX() {
  return <Media greaterThan="md">Render if greater than md</Media>
}

NextJS

// __app.tsx

import React from "react"
import { SizeProvider } from "./media"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SizeProvider>
      <Component {...pageProps} />
    </SizeProvider>
  )
}

// _document.tsx

import { Html, Head, Main, NextScript } from "next/document"
import { mediaStyles } from "./media"

export default function Document() {
  return (
    <Html>
      <Head>
        <style
          dangerouslySetInnerHTML={{ __html: mediaStyles }}
          type="text/css"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Using breakpoints in javascript code

Note: useSizeContextSelector hook relies on the window width/height which is not accessible on the server. As such its not suitable for rendering content based on it as it will lead to server-client miss-matches.

// ComponentX.react.tsx
import { breakpoints, useSizeContextSelector } from "./media"

const useIsLessThanLg = () => {
  return useSizeContextSelector(value => value.width < breakpoints.lg)
}

export function ComponentX() {
  const isLessThanLg = useIsLessThanLg()

  return (
    <button
      onClick={() => {
        if (isLessThanLg) {
          console.log("less than lg")
        } else {
          console.log("not less than lg")
        }
      }}
    >
      Click me
    </button>
  )
}

FAQs

What is @opensea/react-media?

Is @opensea/react-media popular?

Is @opensea/react-media well maintained?

Package last updated on 26 Oct 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install