Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-hook-media

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-hook-media

A lightweight and tree-shakable library for working with media queries in React applications, providing responsive behavior and conditional rendering based on media query conditions.

  • 0.0.1-alpha.1
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

react-hook-media

React Hook Media is a lightweight and tree-shakable library that provides tools for working with media queries in React applications. It allows you to easily incorporate responsive behavior and conditional rendering based on media query conditions.

The library also provides a server-side rendering (SSR) and testing compatibility feature through the configureNodeEnv method. It allows you to configure the Node environment to simulate different media query results during server-side rendering or testing scenarios.

React Hook Media is simple to use and integrates seamlessly with React applications, providing a convenient way to handle media queries and create responsive UI components.

Installation

using npm:

npm install --save react-hook-media

or yarn:

yarn add react-hook-media

Example

import {
  useMatchMedia,
  configureNodeEnv,
  MatchMedia,
  MatchMediaHydrationProvider,
} from "react-hook-media";

const MyComponent = () => {
  const isDesktop = useMatchMedia("(min-width: 900px)");

  return (
    <div>
      {isDesktop ? "This is desktop" : "This is mobile"}
      <MatchMedia
        query="(max-width: 899px)"
        otherwise={"And this is also desktop"}
      >
        And this is also mobile
      </MatchMedia>
    </div>
  );
};

// code bellow is for server-side rendering, ignore it if you don't use it
const Page = ({ mediaHydrationCtx }) => (
  <MatchMediaHydrationProvider value={mediaHydrationCtx}>
    <MyComponent />
  </MatchMediaHydrationProvider>
);

export const getServerSideProps = async () => {
  return {
    props: {
      mediaHydrationCtx: configureNodeEnv({ width: 1000 }),
    },
  };
};

API

useMatchMedia

const useMatchMedia: (mediaQuery: string) => boolean;

Custom hook that implements the behavior of the matchMedia method as a React hook.

In a Node environment, this hook will always return false by default since media queries are not supported. However, you can customize the behavior of useMatchMedia by using the configureNodeEnv method

Returns true if the media query matches, false otherwise.


MatchMedia

type MatchMediaProps = PropsWithChildren<{
  /**
   * The media query to evaluate.
   */
  query: string;
  /**
   * The content to render if the media query does not match (optional).
   */
  otherwise?: ReactNode;
}>;

const MatchMedia: FC<MatchMediaProps>;

Evaluates the provided media query and renders its children if the media query matches. Optionally, you can also provide an otherwise prop to specify the content to render if the media query does not match.

It uses the useMatchMedia hook under the hood


configureNodeEnv

const configureNodeEnv: (
  config: MediaQueryEnvironmentConfig
) => MatchMediaHydrationContext;

Configures the Node environment for server-side rendering (SSR) or testing scenarios.

This function is used to set up the environment for the useMatchMedia hook when running React components on the server or in testing environments. It allows you to provide a custom configuration object to simulate different media query results.

The configuration object should contain properties that match the media query conditions you want to simulate. For example, if you configure it with { width: 768 }, it will simulate the viewport width as if it were 768 pixels wide, affecting the results returned by useMatchMedia when evaluating media queries related to width.

Returns a MatchMediaHydrationContext object that should be passed to the MatchMediaHydrationProvider.


MatchMediaHydrationProvider

type MatchMediaHydrationContext = Record<string, boolean>;

const MatchMediaHydrationProvider: Provider<MatchMediaHydrationContext>;

A React context provider component for hydrating match media values.


License

MIT © Krombik

Keywords

FAQs

Package last updated on 08 Jun 2023

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc