@kodingdotninja/use-tailwind-breakpoint - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.d.ts

@@ -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 };

dist/index.js

@@ -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;

package.json

 {
   "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 <[e-mail]>",
@@ -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": {

README.md

@@ -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() {

No alert changes

Improved metrics

Dependency count

1

-50%

Dev dependency count

12

-7.69%

Number of lines in readme file

169

10.46%

Worsened metrics

Total package byte prevSize

14594

-5.55%

Lines of code

219

-3.95%

No dependency changes