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>
);
};
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<{
query: string;
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