Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kodingdotninja/use-tailwind-breakpoint
Custom hooks to use breakpoints for React 🎐🔨
https://github.com/kodingdotninja/use-tailwind-breakpoint
breakpoint breakpoints react tailwind tailwindcss use-breakpoint use-breakpoints
Last synced: 5 days ago
JSON representation
Custom hooks to use breakpoints for React 🎐🔨
- Host: GitHub
- URL: https://github.com/kodingdotninja/use-tailwind-breakpoint
- Owner: kodingdotninja
- License: mit
- Created: 2021-11-20T06:30:59.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-18T10:27:52.000Z (7 months ago)
- Last Synced: 2024-09-21T13:36:56.582Z (about 2 months ago)
- Topics: breakpoint, breakpoints, react, tailwind, tailwindcss, use-breakpoint, use-breakpoints
- Language: TypeScript
- Homepage: https://koding.ninja/use-tailwind-breakpoint
- Size: 128 KB
- Stars: 51
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# use-tailwind-breakpoint
Custom hooks to use breakpoints for React 🎐🔨
---
**Table of contents**
- [Install](#install)
- [Usage](#usage)
- [Resolve from Tailwind CSS configuration](#resolve-from-tailwind-css-configuration)
- [Extract `screens` values](#extract-screens-values)
- [Without Tailwind CSS](#without-tailwind-css)
- [Available hooks](#available-hooks)
- [`useBreakpoint()`](#usebreakpoint)
- [`useBreakpointEffect()`](#usebreakpointeffect)
- [`useBreakpointValue()`](#usebreakpointvalue)
- [Maintainers](#maintainers)
- [License](#license)
---
## Install
```sh
pnpm install @kodingdotninja/use-tailwind-breakpoint
```
## Usage
### Resolve from Tailwind CSS configuration
[Similar to `pmndrs/zustand`'s `create` API](https://github.com/pmndrs/zustand/#first-create-a-store), initialize the breakpoint hooks by passing the resolved Tailwind CSS configuration using [`resolveConfig`](https://github.com/tailwindlabs/tailwindcss/blob/master/src/util/resolveConfig.js):
```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);
```
### Extract `screens` values
Another option is to extract all [`screens`](https://tailwindcss.com/docs/breakpoints) 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);
```
### 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:
```ts
// /hooks/breakpoint.ts
import create from "@kodingdotninja/use-tailwind-breakpoint";
export const { useBreakpoint } = create({
sm: "640px",
md: "768px",
// ...
});
```
## Available hooks
### `useBreakpoint()`
Use breakpoint value from given breakpoint token
```jsx
import { useBreakpoint } from "./lib/tailwind";
function App() {
const isDesktop = useBreakpoint("md");
return
Current view: {isDesktop ? "Desktop" : "Mobile"};
}
```
### `useBreakpointEffect()`
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");
}
});
}
```
### `useBreakpointValue()`
Resolve value from given breakpoint value
```jsx
import { useBreakpointValue } from "./lib/tailwind";
function App() {
const value = useBreakpointValue("md", "Desktop", "Mobile");
return
Current view: {value};
}
```
## Maintainers
- Griko Nibras ([@grikomsn](https://github.com/grikomsn))
## License
[MIT License, Copyright (c) 2024 Koding Ninja](./LICENSE)