use-tailwind-breakpoint

!npm
!packagephobia/install
!packagephobia/publish

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

``sh
pnpm install @kodingdotninja/use-tailwind-breakpoint
`

Usage

$3

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

`ts
// /hooks/tailwind.ts

import { create } from "@kodingdotninja/use-tailwind-breakpoint";
import resolveConfig from "tailwindcss/resolveConfig";

import tailwindConfig from "path/to/tailwind.config.js";

const config = resolveConfig(tailwindConfig);

export const { useBreakpoint } = create(config.theme.screens);
`

$3

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

`js
// tailwind.screens.js or other name to separate breakpoint values
const screens = {
sm: "640px",
md: "768px",
// ...
};
`

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

`js
// tailwind.config.js
module.exports = {
theme: {
screens: require("path/to/tailwind.screens.js"),
},
// ...
};
`

Then pass the extracted screens to the create function:

`ts
// /hooks/tailwind.ts

import { create } from "@kodingdotninja/use-tailwind-breakpoint";

import screens from "path/to/tailwind.screens.js";

export const { useBreakpoint } = create(screens);
`

$3

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:

`ts
// /hooks/breakpoint.ts

import create from "@kodingdotninja/use-tailwind-breakpoint";

export const { useBreakpoint } = create({
sm: "640px",
md: "768px",
// ...
});
`

Available hooks

$3

Use breakpoint value from given breakpoint token

`jsx
import { useBreakpoint } from "./lib/tailwind";

function App() {
const isDesktop = useBreakpoint("md");

return

;
}
`

$3

Use given breakpoint value to run an effect

`jsx
import { useBreakpointEffect } from "./lib/tailwind";

function App() {
useBreakpointEffect("md", (match) => {
if (match) {
console.log("Desktop view");
}
});
}
`

$3

Resolve value from given breakpoint value

`jsx
import { useBreakpointValue } from "./lib/tailwind";

function App() {
const value = useBreakpointValue("md", "Desktop", "Mobile");

return

;
}
``

Maintainers

- Griko Nibras (@grikomsn)

License

MIT License, Copyright (c) 2024 Koding Ninja