@kodingdotninja/use-tailwind-breakpoint
Advanced tools
Comparing version 0.0.3 to 0.0.4
@@ -1,8 +0,4 @@ | ||
import { TailwindConfig } from 'tailwindcss/tailwind-config'; | ||
export { isBrowser, isSSR, useIsomorphicEffect } from './utils'; | ||
import 'react'; | ||
declare type Breakpoints = { | ||
readonly [breakpoint: string]: string; | ||
}; | ||
declare type CreatorReturnType = { | ||
@@ -14,3 +10,3 @@ /** | ||
* | ||
* @param breakpoint Breakpoint value ([view documentation](https://tailwindcss.com/docs/breakpoints)) | ||
* @param breakpoint Breakpoint value | ||
* | ||
@@ -33,3 +29,3 @@ * @param defaultValue Default value to be used before initializing breakpoint value | ||
* | ||
* @param breakpoint Breakpoint value ([view documentation](https://tailwindcss.com/docs/breakpoints)) | ||
* @param breakpoint Breakpoint value | ||
* | ||
@@ -54,3 +50,3 @@ * @param effect Effect callback/closure when current view is on valid breakpoint | ||
* | ||
* @param breakpoint Breakpoint value ([view documentation](https://tailwindcss.com/docs/breakpoints)) | ||
* @param breakpoint Breakpoint value | ||
* | ||
@@ -72,7 +68,7 @@ * @param valid Value if current view is on valid breakpoint | ||
/** | ||
* Initialize breakpoint hooks from given Tailwind CSS configuration file | ||
* Initialize breakpoint hooks from given configuration | ||
* | ||
* --- | ||
* | ||
* @param configOrScreens Tailwind CSS configuration file (`tailwind.config.js`) | ||
* @param screens Breakpoints/screens object (`{ sm: "640px", md: "768px", ... }`) | ||
* | ||
@@ -84,12 +80,13 @@ * @returns Breakpoint hooks | ||
* ```jsx | ||
* // hooks/tailwind.ts | ||
* // hooks/breakpoint.ts | ||
* | ||
* import create from "@kodingdotninja/use-tailwind-breakpoint"; | ||
* import tailwindConfig from "path/to/tailwind.config"; | ||
* | ||
* export const { useBreakpoint, useBreakpointEffect, useBreakpointValue, ... } = create(tailwindConfig); | ||
* export const { useBreakpoint, ... } = create({ sm: "640px", ... }); | ||
* ``` | ||
*/ | ||
declare function create<ConfigOrScreens extends TailwindConfig | Breakpoints>(configOrScreens: ConfigOrScreens): CreatorReturnType; | ||
declare function create<Screens extends { | ||
readonly [breakpoint: string]: string; | ||
}>(screens: Screens): CreatorReturnType; | ||
export { Breakpoints, CreatorReturnType, create, create as default }; | ||
export { CreatorReturnType, create, create as default }; |
@@ -1,2 +0,2 @@ | ||
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); | ||
@@ -14,6 +14,3 @@ | ||
var _react = require('react'); | ||
var _resolveConfig = require('tailwindcss/resolveConfig'); var _resolveConfig2 = _interopRequireDefault(_resolveConfig); | ||
function create(configOrScreens) { | ||
var _a; | ||
const screens = (_a = _resolveConfig2.default.call(void 0, configOrScreens).theme.screens) != null ? _a : configOrScreens; | ||
function create(screens) { | ||
function useBreakpoint(breakpoint, defaultValue = false) { | ||
@@ -26,4 +23,4 @@ const [match, setMatch] = _react.useState.call(void 0, () => defaultValue); | ||
function track() { | ||
var _a2; | ||
const value = (_a2 = screens == null ? void 0 : screens[breakpoint]) != null ? _a2 : "999999px"; | ||
var _a; | ||
const value = (_a = screens[breakpoint]) != null ? _a : "999999px"; | ||
const query = window.matchMedia(`(min-width: ${value})`); | ||
@@ -30,0 +27,0 @@ matchRef.current = query.matches; |
{ | ||
"name": "@kodingdotninja/use-tailwind-breakpoint", | ||
"description": "Custom hooks to use Tailwind CSS breakpoints for React ๐๐จ", | ||
"version": "0.0.3", | ||
"description": "Custom hooks to use breakpoints for React ๐๐จ", | ||
"version": "0.0.4", | ||
"author": "Griko Nibras <griko@koding.ninja>", | ||
@@ -46,3 +46,2 @@ "homepage": "https://github.com/kodingdotninja/use-tailwind-breakpoint", | ||
"react-dom": "^17", | ||
"tailwindcss": "^2", | ||
"tsup": "^5", | ||
@@ -52,4 +51,3 @@ "typescript": "^4" | ||
"peerDependencies": { | ||
"react": ">=16.8", | ||
"tailwindcss": ">=2" | ||
"react": ">=16.8" | ||
}, | ||
@@ -56,0 +54,0 @@ "peerDependenciesMeta": { |
@@ -9,3 +9,3 @@ <!-- markdownlint-disable MD033 MD036 MD041 --> | ||
Custom hooks to use Tailwind CSS breakpoints for React ๐๐จ | ||
Custom hooks to use breakpoints for React ๐๐จ | ||
@@ -18,4 +18,5 @@ --- | ||
- [Usage](#usage) | ||
- [Option #1: Resolve directly from `tailwind.config.js`](#option-1-resolve-directly-from-tailwindconfigjs) | ||
- [Option #2: Only pass breakpoint values](#option-2-only-pass-breakpoint-values) | ||
- [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) | ||
@@ -43,5 +44,5 @@ - [`useBreakpoint()`](#usebreakpoint) | ||
### Option #1: Resolve directly from `tailwind.config.js` | ||
### 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 `tailwind.config.js` which will be resolved internally using [`resolveConfig`](https://github.com/tailwindlabs/tailwindcss/blob/master/src/util/resolveConfig.js): | ||
[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): | ||
@@ -52,14 +53,15 @@ ```ts | ||
import create from "@kodingdotninja/use-tailwind-breakpoint"; | ||
import resolveConfig from "tailwindcss/resolveConfig"; | ||
import tailwindConfig from "path/to/tailwind.config.js"; | ||
export const { useBreakpoint } = create(tailwindConfig); | ||
const config = resolveConfig(tailwindConfig); | ||
export const { useBreakpoint } = create(config.theme.screens); | ||
``` | ||
> โ ๏ธ This possibly imports all `tailwind.config.js` values. Make sure to check the client bundle size. | ||
### Extract `screens` values | ||
### Option #2: Only pass breakpoint values | ||
Another option is to extract all [`screens`](https://tailwindcss.com/docs/breakpoints) values into a separate file: | ||
Extract the [`screens`](https://tailwindcss.com/docs/breakpoints) values into a separate file: | ||
```js | ||
@@ -80,5 +82,3 @@ // tailwind.screens.js or other name to separate breakpoint values | ||
theme: { | ||
extend: { | ||
screens: require("path/to/tailwind.screens.js"), | ||
}, | ||
screens: require("path/to/tailwind.screens.js"), | ||
}, | ||
@@ -96,3 +96,3 @@ // ... | ||
import tailwindScreens from "path/to/tailwind.screens.js"; | ||
import screens from "path/to/tailwind.screens.js"; | ||
@@ -102,2 +102,18 @@ 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 | ||
@@ -110,3 +126,3 @@ | ||
```jsx | ||
import { useBreakpoint } from "./lib/"; | ||
import { useBreakpoint } from "./lib/tailwind"; | ||
@@ -125,3 +141,3 @@ function App() { | ||
```jsx | ||
import { useBreakpointEffect } from "@kodingdotninja/use-tailwind-breakpoint"; | ||
import { useBreakpointEffect } from "./lib/tailwind"; | ||
@@ -142,3 +158,3 @@ function App() { | ||
```jsx | ||
import { useBreakpointValue } from "@kodingdotninja/use-tailwind-breakpoint"; | ||
import { useBreakpointValue } from "./lib/tailwind"; | ||
@@ -145,0 +161,0 @@ function App() { |
Sorry, the diff of this file is not supported yet
1
12
169
14594
219