use-tailwind-breakpoint

Custom hooks to use breakpoints for React 🎐🔨

---

Table of contents

• Install
• Usage
  • Resolve from Tailwind CSS configuration
  • Extract screens values
  • Without Tailwind CSS
• Available hooks
  • useBreakpoint()
  • useBreakpointEffect()
  • useBreakpointValue()
• Maintainers
• License

---

Install

1pnpm install @kodingdotninja/use-tailwind-breakpoint

Usage

Resolve from Tailwind CSS configuration

Similar to pmndrs/zustand's create API, initialize the breakpoint hooks by passing the resolved Tailwind CSS configuration using resolveConfig:

1// /hooks/tailwind.ts
2
3import { create } from "@kodingdotninja/use-tailwind-breakpoint";
4import resolveConfig from "tailwindcss/resolveConfig";
5
6import tailwindConfig from "path/to/tailwind.config.js";
7
8const config = resolveConfig(tailwindConfig);
9
10export const { useBreakpoint } = create(config.theme.screens);

Extract screens values

Another option is to extract all screens values into a separate file:

1// tailwind.screens.js or other name to separate breakpoint values
2const screens = {
3  sm: "640px",
4  md: "768px",
5  // ...
6};

To keep the same values, require inside tailwind.config.js:

1// tailwind.config.js
2module.exports = {
3  theme: {
4    screens: require("path/to/tailwind.screens.js"),
5  },
6  // ...
7};

Then pass the extracted screens to the create function:

1// /hooks/tailwind.ts
2
3import { create } from "@kodingdotninja/use-tailwind-breakpoint";
4
5import screens from "path/to/tailwind.screens.js";
6
7export const { useBreakpoint } = create(screens);

Without Tailwind CSS

While this package was built in mind for Tailwind CSS usage, it can be used without it since there is no dependency at all. You can pass any breakpoint values:

1// /hooks/breakpoint.ts
2
3import create from "@kodingdotninja/use-tailwind-breakpoint";
4
5export const { useBreakpoint } = create({
6  sm: "640px",
7  md: "768px",
8  // ...
9});

Available hooks

useBreakpoint()

Use breakpoint value from given breakpoint token

1import { useBreakpoint } from "./lib/tailwind";
2
3function App() {
4  const isDesktop = useBreakpoint("md");
5
6  return <div>Current view: {isDesktop ? "Desktop" : "Mobile"}</div>;
7}

useBreakpointEffect()

Use given breakpoint value to run an effect

1import { useBreakpointEffect } from "./lib/tailwind";
2
3function App() {
4  useBreakpointEffect("md", (match) => {
5    if (match) {
6      console.log("Desktop view");
7    }
8  });
9}

useBreakpointValue()

Resolve value from given breakpoint value

1import { useBreakpointValue } from "./lib/tailwind";
2
3function App() {
4  const value = useBreakpointValue("md", "Desktop", "Mobile");
5
6  return <div>Current view: {value}</div>;
7}

Maintainers

• Griko Nibras (@grikomsn)

License

MIT License, Copyright (c) 2024 Koding Ninja