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

Comparing version 0.0.5 to 1.0.0

dist/index.d.ts

@@ -1,86 +0,13 @@
-import { TailwindThemeValue } from 'tailwindcss/tailwind-config';
-export { isBrowser, isSSR, useIsomorphicEffect } from './utils';
-import 'react';
+import { useLayoutEffect } from 'react';
 
-declare type CreatorReturnType = {
-    /**
-     * Use breakpoint value from given breakpoint token
-     *
-     * ---
-     *
-     * @param breakpoint Breakpoint value
-     *
-     * @param defaultValue Default value to be used before initializing breakpoint value
-     *
-     * @returns Boolean value whether current view is on valid breakpoint
-     *
-     * @example
-     *
-     * ```jsx
-     * const isDesktop = useBreakpoint("md");
-     * ```
-     */
-    useBreakpoint<B>(breakpoint: B, defaultValue?: boolean): boolean;
-    /**
-     * Use given breakpoint value to run an effect
-     *
-     * ---
-     *
-     * @param breakpoint Breakpoint value
-     *
-     * @param effect Effect callback/closure when current view is on valid breakpoint
-     *
-     * @example
-     *
-     * ```jsx
-     * useBreakpointEffect("md", (match) => {
-     *   if (match) {
-     *     ...
-     *   }
-     * });
-     * ```
-     */
-    useBreakpointEffect<B>(breakpoint: B, effect: (match: boolean) => void): void;
-    /**
-     * Resolve value from given breakpoint value
-     *
-     * ---
-     *
-     * @param breakpoint Breakpoint value
-     *
-     * @param valid Value if current view is on valid breakpoint
-     *
-     * @param invalid Value if current view is not on valid breakpoint
-     *
-     * @returns Resolved value depending from given breakpoint
-     *
-     * @example
-     *
-     * ```jsx
-     * const message = useBreakpointValue("md", "Desktop view", "Mobile view");
-     * ```
-     */
-    useBreakpointValue<B, T, U>(breakpoint: B, valid: T, invalid: U): T | U;
+declare function create<TScreens extends Record<string, string>>(screens: TScreens): {
+    useBreakpoint: (breakpoint: keyof TScreens, defaultValue?: boolean) => boolean;
+    useBreakpointEffect: (breakpoint: keyof TScreens, effect: (match: boolean) => void) => null;
+    useBreakpointValue: <T, U>(breakpoint: keyof TScreens, valid: T, invalid: U) => T | U;
 };
-/**
- * Initialize breakpoint hooks from given configuration
- *
- * ---
- *
- * @param screens Breakpoints/screens object (`{ sm: "640px", md: "768px", ... }`)
- *
- * @returns Breakpoint hooks
- *
- * @example
- *
- * ```jsx
- * // hooks/breakpoint.ts
- *
- * import create from "@kodingdotninja/use-tailwind-breakpoint";
- *
- * export const { useBreakpoint, ... } = create({ sm: "640px", ... });
- * ```
- */
-declare function create(screens: TailwindThemeValue | Record<string, string>): CreatorReturnType;
 
-export { CreatorReturnType, create, create as default };
+declare const isSSR: boolean;
+declare const isBrowser: boolean;
+declare const useIsomorphicEffect: typeof useLayoutEffect;
+
+export { create, create as default, isBrowser, isSSR, useIsomorphicEffect };

dist/index.js

@@ -1,58 +0,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
 
+var react = require('react');
 
-var _chunkQ63M5F2Pjs = require('./chunk-Q63M5F2P.js');
+var v=typeof window>"u"||!window.navigator||/ServerSideRendering|^Deno\//.test(window.navigator.userAgent),c=!v,i=c?react.useLayoutEffect:react.useEffect;function E(m){function r(t,e=!1){let[n,o]=react.useState(()=>e);return i(()=>{if(!(c&&"matchMedia"in window&&window.matchMedia))return;let a=m[t]??"999999px",s=window.matchMedia(`(min-width: ${a})`);function u(p){o(p.matches);}return o(s.matches),s.addEventListener("change",u),()=>s.removeEventListener("change",u)},[t,e]),n}function d(t,e){let n=r(t);return i(()=>e(n),[t,e]),null}function h(t,e,n){let o=r(t);return react.useMemo(()=>o?e:n,[n,o,e])}return {useBreakpoint:r,useBreakpointEffect:d,useBreakpointValue:h}}
 
-// src/index.ts
-
-
-
-
-
-var _react = require('react');
-function create(screens) {
-  function useBreakpoint(breakpoint, defaultValue = false) {
-    const [match, setMatch] = _react.useState.call(void 0, () => defaultValue);
-    const matchRef = _react.useRef.call(void 0, defaultValue);
-    _chunkQ63M5F2Pjs.useIsomorphicEffect.call(void 0, () => {
-      if (!(_chunkQ63M5F2Pjs.isBrowser && "matchMedia" in window))
-        return void 0;
-      function track() {
-        var _a;
-        const value = (_a = screens[breakpoint]) != null ? _a : "999999px";
-        const query = window.matchMedia(`(min-width: ${value})`);
-        matchRef.current = query.matches;
-        if (matchRef.current != match) {
-          setMatch(matchRef.current);
-        }
-      }
-      window.addEventListener("resize", track);
-      return () => window.removeEventListener("resize", track);
-    });
-    return match;
-  }
-  function useBreakpointEffect(breakpoint, effect) {
-    const match = useBreakpoint(breakpoint);
-    _react.useEffect.call(void 0, () => effect(match));
-    return null;
-  }
-  function useBreakpointValue(breakpoint, valid, invalid) {
-    const match = useBreakpoint(breakpoint);
-    const value = _react.useMemo.call(void 0, () => match ? valid : invalid, [invalid, match, valid]);
-    return value;
-  }
-  return {
-    useBreakpoint,
-    useBreakpointEffect,
-    useBreakpointValue
-  };
-}
-var src_default = create;
-
-
-
-
-
-
-exports.create = create; exports.default = src_default; exports.isBrowser = _chunkQ63M5F2Pjs.isBrowser; exports.isSSR = _chunkQ63M5F2Pjs.isSSR; exports.useIsomorphicEffect = _chunkQ63M5F2Pjs.useIsomorphicEffect;
+exports.create = E;
+exports.default = E;
+exports.isBrowser = c;
+exports.isSSR = v;
+exports.useIsomorphicEffect = i;

package.json

 {
   "name": "@kodingdotninja/use-tailwind-breakpoint",
   "description": "Custom hooks to use breakpoints for React 🎐🔨",
-  "version": "0.0.5",
+  "version": "1.0.0",
   "author": "Griko Nibras <[e-mail]>",
@@ -14,4 +14,14 @@ "homepage": "https://github.com/kodingdotninja/use-tailwind-breakpoint",
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "module": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
     }
@@ -21,32 +31,7 @@ },
   "module": "dist/index.mjs",
-  "types": "dist/index.d.js",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
-  "scripts": {
-    "# general commands": "##################################################",
-    "build": "tsup",
-    "deduplicate": "npx yarn-deduplicate && yarn install",
-    "dev": "tsup --watch src",
-    "lint": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
-    "prepare": "husky install $PWD/.husky",
-    "prepublishOnly": "yarn lint",
-    "ship": "np",
-    "type-check": "tsc --noEmit",
-    "validate": "yarn lint && yarn type-check",
-    "#": "###################################################################"
-  },
-  "devDependencies": {
-    "@types/node": "^14",
-    "@types/react": "^17",
-    "eslint": "^7",
-    "eslint-config-kdnj": "^1",
-    "husky": "^7",
-    "lint-staged": "^12",
-    "np": "^7",
-    "react": "^17",
-    "react-dom": "^17",
-    "tsup": "^5",
-    "typescript": "^4"
-  },
   "peerDependencies": {
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "tailwindcss": "*"
   },
@@ -56,36 +41,7 @@ "peerDependenciesMeta": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
     }
   },
-  "eslintConfig": {
-    "env": {
-      "browser": true
-    },
-    "extends": [
-      "eslint-config-kdnj/react"
-    ],
-    "ignorePatterns": [
-      "dist"
-    ],
-    "rules": {
-      "react/react-in-jsx-scope": [
-        "off"
-      ]
-    },
-    "root": true
-  },
-  "lint-staged": {
-    "*.{js,json,md}": [
-      "prettier --write"
-    ],
-    "src/*.{js,jsx,ts,tsx}": [
-      "eslint --fix"
-    ]
-  },
-  "prettier": {
-    "endOfLine": "auto",
-    "printWidth": 120,
-    "semi": true,
-    "singleQuote": false,
-    "trailingComma": "all"
-  },
   "publishConfig": {
@@ -109,2 +65,2 @@ "access": "public",
   "license": "MIT"
-}
+}

README.md

@@ -15,3 +15,3 @@ <!-- markdownlint-disable MD033 MD036 MD041 -->
 
-- [Installing](#installing)
+- [Install](#install)
 - [Usage](#usage)
@@ -25,3 +25,2 @@ - [Resolve from Tailwind CSS configuration](#resolve-from-tailwind-css-configuration)
   - [`useBreakpointValue()`](#usebreakpointvalue)
-- [Suggestions and/or questions](#suggestions-andor-questions)
 - [Maintainers](#maintainers)
@@ -32,10 +31,6 @@ - [License](#license)
 
-## Installing
+## Install
 
 ```sh
-# using npm
-npm install @kodingdotninja/use-tailwind-breakpoint
-
-# using yarn
-yarn add @kodingdotninja/use-tailwind-breakpoint
+pnpm install @kodingdotninja/use-tailwind-breakpoint
 ```
@@ -52,3 +47,3 @@
 
-import create from "@kodingdotninja/use-tailwind-breakpoint";
+import { create } from "@kodingdotninja/use-tailwind-breakpoint";
 import resolveConfig from "tailwindcss/resolveConfig";
@@ -93,3 +88,3 @@
 
-import create from "@kodingdotninja/use-tailwind-breakpoint";
+import { create } from "@kodingdotninja/use-tailwind-breakpoint";
 
@@ -163,6 +158,2 @@ import screens from "path/to/tailwind.screens.js";
 
-## Suggestions and/or questions
-
-Head over to our [dedicated Discord channel for `use-tailwind-breakpoint`](https://discord.gg/Zrfr7VqtpR).
-
 ## Maintainers
@@ -174,2 +165,2 @@
 
-[MIT License, Copyright (c) 2021 Koding Ninja](./LICENSE)
+[MIT License, Copyright (c) 2024 Koding Ninja](./LICENSE)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Worsened metrics

Total package byte prevSize

9234

decreased by-36.75%

Dependency count

2

increased by100%

Number of package files

7

decreased by-36.36%

Lines of code

26

decreased by-88.07%

Number of low quality alerts

2

increased by100%

Number of lines in readme file

160

decreased by-5.33%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes