@onoxm/react-hooks 0.1.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ONO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/hooks/index.js

@@ -0,0 +1 @@
+import{u as r}from "./useClickOutSide.tsx-C6XuLZzd.js";import{u}from "./useCountdown.tsx-DWqs6wNp.js";import{u as m}from "./useEventListener.tsx-C8V9Qip6.js";import{u as f}from "./useGetElementSize.tsx-DML7z5Xp.js";import{u as x}from "./useKeyPress.tsx-hgs6v_Jt.js";import{u as n}from "./useMouseClick.tsx-BmzbuM6X.js";import{u as C}from "./useQuery.tsx-FzGWYq50.js";import{u as d}from "./useTheme.tsx-C-GCpzAS.js";import{u as k}from "./useThemePro.tsx-Da38iQ5J.js";export{r as useClickOutSide,u as useCountdown,m as useEventListener,f as useGetElementSize,x as useKeyPress,n as useMouseClick,C as useQuery,d as useTheme,k as useThemePro};

package/dist/hooks/useClickOutSide.tsx-C6XuLZzd.js

@@ -0,0 +1 @@
+import{u as i}from "./useEventListener.tsx-C8V9Qip6.js";const c=(n,o,s)=>i(((t)=>{const e=typeof t=="string" ? [t]:t;if(new Set(e).size!==e.length)throw new Error("there are duplicates in the event type");return e;})((s==null ? void 0:s.event)||"click"),(t)=>{if(n)if(n instanceof Array)n.map((e)=>e instanceof HTMLElement ? e:e.current).some((e)=>!!e&&e.contains(t.target))||o(t);else{const e=n instanceof HTMLElement ? n:n.current;e&&!e.contains(t.target)&&o(t);}},{deps:[n,...(s==null ? void 0:s.deps)||[]]});export{c as u};

package/dist/hooks/useCountdown.tsx-DWqs6wNp.js

@@ -0,0 +1 @@
+import{useState as o,useRef as f,useCallback as c,useEffect as T}from "react";const b=(t=60,r)=>{const [u,s]=o(t),[a,l]=o(!1),e=f(null),i=c(()=>l(!0),[]),n=c(()=>{l(!1),s(t),e.current&&(clearTimeout(e.current),e.current=null),r==null||r();},[t,r]);return T(()=>{if(a)return u>0 ? e.current=setTimeout(()=>{s((m)=>m-1);},1e3):n(),()=>{e.current&&(clearTimeout(e.current),e.current=null);};},[a,u,n]),[u,i,n];};export{b as u};

package/dist/hooks/useEventListener.tsx-C8V9Qip6.js

@@ -0,0 +1 @@
+import{useEffect as w}from "react";const f=(e,t,d)=>{const{target:n,deps:s,isDeferred:i}=d||{},o=(r)=>t(r);return w(()=>(typeof e=="string" ?!i&&(n||window).addEventListener(e,o):e.forEach((r)=>!i&&(n||window).addEventListener(r,o)),()=>{typeof e=="string" ?(n||window).removeEventListener(e,o):e.forEach((r)=>(n||window).removeEventListener(r,o));}),[n,...s||[]]),i ?()=>{typeof e=="string" ?(n||window).addEventListener(e,o):e.forEach((r)=>(n||window).addEventListener(r,o));}:void 0;};export{f as u};

package/dist/hooks/useGetElementSize.tsx-DML7z5Xp.js

@@ -0,0 +1 @@
+import{useState as o,useEffect as c}from "react";const w=(e)=>{const [f,r]=o({w:0,h:0}),t=new ResizeObserver((n)=>{for(const s of n)r({w:s.borderBoxSize[0].inlineSize,h:s.borderBoxSize[0].blockSize});}),i=()=>{if(e&&typeof e!="function")t.observe(e instanceof HTMLElement ? e:e.current);else if(e&&typeof e=="function"){const n=e();t.observe(n instanceof HTMLElement ? n:n.current);}else r({w:window.innerWidth,h:window.innerHeight});};return c(()=>(i(),window.addEventListener("resize",i),()=>{if(window.removeEventListener("resize",i),e&&typeof e!="function")t.unobserve(e instanceof HTMLElement ? e:e.current);else if(e&&typeof e=="function"){const n=e();t.unobserve(n instanceof HTMLElement ? n:n.current);}}),[e]),f;};export{w as u};

package/dist/hooks/useKeyPress.tsx-hgs6v_Jt.js

@@ -0,0 +1 @@
+import{u as p}from "./useEventListener.tsx-C8V9Qip6.js";const h=(o)=>o.toString().toLocaleLowerCase(),k=(o,d,t)=>{const K=(s)=>p(s,(m)=>((u,e,g)=>{u.forEach((c)=>{if(c.includes("+")&&c.length>1){const l=c.split("+"),n=e.ctrlKey&&l.includes("ctrl"),r=e.shiftKey&&l.includes("shift"),i=e.altKey&&l.includes("alt"),y=e.metaKey&&l.includes("meta"),f=(e.ctrlKey||e.metaKey)&&l.includes("commandorcontrol");l.length===2 ?(n||r||i||y||f)&&e.key.toLocaleLowerCase()===l[l.length-1]&&d(e,c):l.length===3&&(n&&r||n&&i||n&&y||n&&f||r&&i||r&&y||r&&f||i&&y||i&&f||y&&f)&&e.key.toLocaleLowerCase()===l[l.length-1]&&d(e,c);}else if(c.includes(h(e.key))){if(g)c===h(e.key)&&d(e,c);else if(!(e.ctrlKey||e.metaKey||e.shiftKey||e.altKey))return d(e,c);}});})(o instanceof Array ? o.map((u)=>h(u)):[h(o)],m,(t==null ? void 0:t.exactMatch)||!1),{deps:[t==null ? void 0:t.target,...(t==null ? void 0:t.deps)||[]]});(t==null ? void 0:t.events)instanceof Array ? t.events.forEach((s)=>K(s)):K((t==null ? void 0:t.events)||"keydown");};export{k as u};

package/dist/hooks/useMouseClick.tsx-BmzbuM6X.js

@@ -0,0 +1 @@
+import{useState as X}from "react";import{u as Y}from "./useEventListener.tsx-C8V9Qip6.js";const g=()=>{const [c,n]=X({clientX:0,clientY:0,screenX:0,screenY:0,pageX:0,pageY:0});return Y("click",(e)=>{const t=e.clientX,r=e.clientY,s=e.screenX,a=e.screenY,i=e.pageX,p=e.pageY;n({clientX:t,clientY:r,screenX:s,screenY:a,pageX:i,pageY:p});}),c;};export{g as u};

package/dist/hooks/useQuery.tsx-FzGWYq50.js

@@ -0,0 +1 @@
+import{useLocation as a}from "react-router-dom";const c=()=>{const r=a(),o=new URLSearchParams(r.search),e={};for(let [t,s] of o.entries())e[t]=s;return e;};export{c as u};

package/dist/hooks/useTheme.tsx-C-GCpzAS.js

@@ -0,0 +1 @@
+import{useEffect as o}from "react";let a=!1;const h=({theme:r,onDark:s,onLight:n})=>{const e=window.matchMedia("(prefers-color-scheme:dark)"),t=()=>{e.matches ? s():n();};o(()=>{(()=>{switch(a&&(a=!1,e.removeEventListener("change",t)),r){case "light":n();break;case "dark":s();break;default:t(),a=!0,e.addEventListener("change",t);}})();},[r]);};export{h as u};

package/dist/hooks/useThemePro.tsx-Da38iQ5J.js

@@ -0,0 +1 @@
+import{useState as k,useRef as f}from "react";import{u as y}from "./useTheme.tsx-C-GCpzAS.js";const w=(u)=>{const a="ono-view-transition-clip-path-circle",{element:n,duration:o=300,themeRules:s,onChangeTheme:t}=u,e=s!=null&&s()||document.documentElement.classList.contains("dark")? "dark":"light";if(!document.startViewTransition)return t(e==="dark" ? "light":"dark");const h=document.startViewTransition(()=>{const r=document.documentElement.classList.contains("dark");t(r ? "light":"dark");}),{top:i,left:p,width:v,height:x}=n.getBoundingClientRect(),d=p+v/2,l=i+x/2,g=[`circle(0%at ${d}px ${l}px)`,`circle(${Math.hypot(Math.max(d,window.innerWidth-d),Math.max(l,window.innerHeight-l))}px at ${d}px ${l}px)`];((r,c)=>{const m=document.createElement("style");m.setAttribute("type","text/css"),m.setAttribute("data-style-tag",c),m.textContent="::view-transition-old(root),::view-transition-new(root){animation:none;}.dark::view-transition-old(root){z-index:1;}.dark::view-transition-new(root){z-index:999;}::view-transition-old(root){z-index:999;}::view-transition-new(root){z-index:1;}",document.head.appendChild(m);})(0,a),h.ready.then(()=>{document.documentElement.animate({clipPath:e==="light" ? g:g.reverse()},{duration:o,fill:"forwards",easing:"ease-in-out",pseudoElement:e==="light" ? "::view-transition-new(root)":"::view-transition-old(root)"}),setTimeout(()=>{return r=a,void document.head.querySelectorAll("style").forEach((c)=>c.getAttribute("data-style-tag")===r&&c.remove());var r;},o+50);});},C=(u)=>{const{initTheme:a="light",themeRules:n=(e)=>{e ? document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark");}}=u||Object.assign({}),[o,s]=k(a),t=f(null);return y({theme:o,onDark:()=>{t.current ? w({element:t.current,onChangeTheme:()=>n(!0)}):n(!0);},onLight:()=>{t.current ? w({element:t.current,onChangeTheme:()=>n(!1)}):n(!1);}}),[o,({targetTheme:e,element:h,onChange:i})=>{t.current=h||null,i==null||i(),s(e);}];};export{C as u};

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+import { useClickOutSide } from './src/useClickOutSide';
+import { useCountdown } from './src/useCountdown';
+import { useEventListener } from './src/useEventListener';
+import { useGetElementSize } from './src/useGetElementSize';
+import { useKeyPress, KeyEvent, KeyType } from './src/useKeyPress';
+import { useMouseClick } from './src/useMouseClick';
+import { useQuery } from './src/useQuery';
+import { useTheme, ThemeType } from './src/useTheme';
+import { useThemePro } from './src/useThemePro';
+export { useClickOutSide, useCountdown, useEventListener, useGetElementSize, useKeyPress, useMouseClick, useQuery, useTheme, useThemePro };
+export type { KeyEvent, KeyType, ThemeType };

package/dist/types/src/useClickOutSide.d.ts

@@ -0,0 +1,9 @@
+import { DependencyList, RefObject } from 'react';
+type OutsideElementTypes = RefObject<HTMLElement | null> | HTMLElement | (RefObject<HTMLElement | null> | HTMLElement)[] | null;
+type ClickEventTypes = 'click' | 'contextmenu' | 'mousedown' | 'mouseup' | 'mousemove' | 'touchstart' | 'touchend';
+type OutsideOptions = {
+    event?: ClickEventTypes | ClickEventTypes[];
+    deps?: DependencyList;
+};
+export declare const useClickOutSide: (outsideElement: OutsideElementTypes, handler: (e: MouseEvent) => void, options?: OutsideOptions) => (() => void) | undefined;
+export {};

package/dist/types/src/useCountdown.d.ts

@@ -0,0 +1 @@
+export declare const useCountdown: (initialTime?: number, onFinish?: () => void) => readonly [number, () => void, () => void];

package/dist/types/src/useEventListener.d.ts

@@ -0,0 +1,8 @@
+import { DependencyList } from 'react';
+type EventListenerOptions = {
+    isDeferred?: boolean;
+    target?: EventTarget;
+    deps?: DependencyList;
+};
+export declare const useEventListener: (event: string | string[], handler: (e: Event) => void, options?: EventListenerOptions) => (() => void) | undefined;
+export {};

package/dist/types/src/useGetElementSize.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export declare const useGetElementSize: (target?: HTMLElement | RefObject<HTMLElement | null> | (() => HTMLElement | RefObject<HTMLElement | null>) | null) => {
+    w: number;
+    h: number;
+};

package/dist/types/src/useKeyPress.d.ts

@@ -0,0 +1,12 @@
+import { DependencyList } from 'react';
+export type KeyType = number | string | FunctionKey;
+export type KeyEvent = 'keydown' | 'keyup';
+type Options = {
+    events?: KeyEvent | KeyEvent[];
+    target?: Element;
+    deps?: DependencyList;
+    exactMatch?: boolean;
+};
+type FunctionKey = 'Ctrl' | 'Shift' | 'Alt' | 'Meta' | 'CommandOrControl';
+export declare const useKeyPress: (keyFilter: KeyType | KeyType[], eventHandler: (event: KeyboardEvent, key: KeyType) => void, options?: Options) => void;
+export {};

package/dist/types/src/useMouseClick.d.ts

@@ -0,0 +1,8 @@
+export declare const useMouseClick: () => {
+    clientX: number;
+    clientY: number;
+    screenX: number;
+    screenY: number;
+    pageX: number;
+    pageY: number;
+};

package/dist/types/src/useQuery.d.ts

@@ -0,0 +1,3 @@
+export declare const useQuery: () => {
+    [key: string]: string;
+};

package/dist/types/src/useTheme.d.ts

@@ -0,0 +1,8 @@
+export type ThemeType = 'light' | 'dark' | 'system';
+type useThemeProps = {
+    theme: ThemeType;
+    onDark: () => void;
+    onLight: () => void;
+};
+export declare const useTheme: ({ theme, onDark, onLight }: useThemeProps) => void;
+export {};

package/dist/types/src/useThemePro.d.ts

@@ -0,0 +1,11 @@
+import { ThemeType } from './useTheme';
+interface useThemeProps {
+    initTheme?: ThemeType;
+    themeRules?: (isDark: boolean) => void;
+}
+export declare const useThemePro: (options?: useThemeProps) => readonly [ThemeType, ({ targetTheme, element, onChange }: {
+    targetTheme: ThemeType;
+    element?: HTMLElement;
+    onChange?: () => void;
+}) => void];
+export {};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@onoxm/react-hooks",
+  "private": false,
+  "version": "0.1.1",
+  "description": "Component library by React + Typescript",
+  "type": "module",
+  "main": "./dist/hooks/index.js",
+  "module": "./dist/hooks/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "LICENSE.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.js"
+    },
+    "./dist/": {
+      "import": "./dist/",
+      "require": "./dist/"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "component"
+  ],
+  "author": "ono",
+  "license": "MIT",
+  "dependencies": {
+    "@onoxm/utils": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}