@kodingdotninja/use-tailwind-breakpoint
Advanced tools
Weekly downloads
Changelog
v0.0.5
https://github.com/kodingdotninja/use-tailwind-breakpoint/compare/v0.0.4...v0.0.5
Readme
Custom hooks to use breakpoints for React 🎐🔨
Table of contents
# using npm
npm install @kodingdotninja/use-tailwind-breakpoint
# using yarn
yarn add @kodingdotninja/use-tailwind-breakpoint
Similar to pmndrs/zustand
's create
API, initialize the breakpoint hooks by passing the resolved Tailwind CSS configuration using resolveConfig
:
// /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);
screens
valuesAnother option is to extract all screens
values into a separate file:
// 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
:
// tailwind.config.js
module.exports = {
theme: {
screens: require("path/to/tailwind.screens.js"),
},
// ...
};
Then pass the extracted screens
to the create
function:
// /hooks/tailwind.ts
import create from "@kodingdotninja/use-tailwind-breakpoint";
import screens from "path/to/tailwind.screens.js";
export const { useBreakpoint } = create(screens);
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:
// /hooks/breakpoint.ts
import create from "@kodingdotninja/use-tailwind-breakpoint";
export const { useBreakpoint } = create({
sm: "640px",
md: "768px",
// ...
});
useBreakpoint()
Use breakpoint value from given breakpoint token
import { useBreakpoint } from "./lib/tailwind";
function App() {
const isDesktop = useBreakpoint("md");
return <div>Current view: {isDesktop ? "Desktop" : "Mobile"}</div>;
}
useBreakpointEffect()
Use given breakpoint value to run an effect
import { useBreakpointEffect } from "./lib/tailwind";
function App() {
useBreakpointEffect("md", (match) => {
if (match) {
console.log("Desktop view");
}
});
}
useBreakpointValue()
Resolve value from given breakpoint value
import { useBreakpointValue } from "./lib/tailwind";
function App() {
const value = useBreakpointValue("md", "Desktop", "Mobile");
return <div>Current view: {value}</div>;
}
Head over to our dedicated Discord channel for use-tailwind-breakpoint
.
FAQs
Custom hooks to use breakpoints for React 🎐🔨
The npm package @kodingdotninja/use-tailwind-breakpoint receives a total of 366 weekly downloads. As such, @kodingdotninja/use-tailwind-breakpoint popularity was classified as not popular.
We found that @kodingdotninja/use-tailwind-breakpoint demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.