@mantine/hooks 3.4.1 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.js +1 -0
- package/cjs/index.js.map +1 -1
- package/cjs/use-form/use-form.js.map +1 -1
- package/cjs/use-resize-observer/use-resize-observer.js +5 -0
- package/cjs/use-resize-observer/use-resize-observer.js.map +1 -1
- package/esm/index.js +1 -1
- package/esm/use-form/use-form.js.map +1 -1
- package/esm/use-resize-observer/use-resize-observer.js +5 -1
- package/esm/use-resize-observer/use-resize-observer.js.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.d.ts.map +1 -1
- package/lib/use-form/use-form.d.ts +9 -7
- package/lib/use-form/use-form.d.ts.map +1 -1
- package/lib/use-resize-observer/use-resize-observer.d.ts +5 -0
- package/lib/use-resize-observer/use-resize-observer.d.ts.map +1 -1
- package/package.json +1 -1
package/cjs/index.js
CHANGED
|
@@ -83,6 +83,7 @@ exports.useQueue = useQueue.useQueue;
|
|
|
83
83
|
exports.usePageLeave = usePageLeave.usePageLeave;
|
|
84
84
|
exports.useReducedMotion = useReducedMotion.useReducedMotion;
|
|
85
85
|
exports.useScrollIntoView = useScrollIntoView.useScrollIntoView;
|
|
86
|
+
exports.useElementSize = useResizeObserver.useElementSize;
|
|
86
87
|
exports.useResizeObserver = useResizeObserver.useResizeObserver;
|
|
87
88
|
exports.useScrollLock = useScrollLock.useScrollLock;
|
|
88
89
|
exports.useShallowEffect = useShallowEffect.useShallowEffect;
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-form.js","sources":["../../src/use-form/use-form.ts"],"sourcesContent":["import React, { useState } from 'react';\nimport { getInputOnChange } from '../use-input-state/use-input-state';\n\nexport type ValidationRule<T> = {\n readonly [P in keyof T]?: (value: T[P], values?: T) => boolean;\n};\n\nexport type UseFormErrors<T> = {\n readonly [P in keyof T]?: React.ReactNode | null;\n};\n\
|
|
1
|
+
{"version":3,"file":"use-form.js","sources":["../../src/use-form/use-form.ts"],"sourcesContent":["import React, { useState } from 'react';\nimport { getInputOnChange } from '../use-input-state/use-input-state';\n\nexport type ValidationRule<T> = {\n readonly [P in keyof T]?: (value: T[P], values?: T) => boolean;\n};\n\nexport type UseFormErrors<T> = {\n readonly [P in keyof T]?: React.ReactNode | null;\n};\n\ninterface UseFormInput<T> {\n validationRules?: ValidationRule<T>;\n errorMessages?: UseFormErrors<T>;\n initialValues: T;\n}\n\nexport interface UseForm<T> {\n values: T;\n errors: Record<keyof T, React.ReactNode>;\n validate: () => boolean;\n reset: () => void;\n setErrors: React.Dispatch<React.SetStateAction<Record<keyof T, React.ReactNode>>>;\n setValues: React.Dispatch<React.SetStateAction<T>>;\n setFieldValue: <K extends keyof T, U extends T[K]>(field: K, value: U) => void;\n setFieldError: (field: keyof T, error: React.ReactNode) => void;\n validateField: (field: keyof T) => void;\n resetErrors: () => void;\n onSubmit: (handleSubmit: (values: T) => any) => (event?: React.FormEvent) => void;\n getInputProps: <K extends keyof T>(\n field: K,\n options?: {\n type?: 'checkbox' | 'default';\n }\n ) => {\n [x: string]: any;\n onChange: any;\n error: Record<keyof T, React.ReactNode>[K];\n };\n}\n\nexport function useForm<T extends { [key: string]: any }>({\n initialValues,\n validationRules = {},\n errorMessages = {},\n}: UseFormInput<T>): UseForm<T> {\n type ValidationErrors = Record<keyof T, React.ReactNode>;\n\n const initialErrors = Object.keys(initialValues).reduce((acc, field) => {\n acc[field as keyof T] = null;\n return acc;\n }, {} as ValidationErrors);\n\n const [errors, setErrors] = useState(initialErrors);\n const [values, setValues] = useState(initialValues);\n\n const resetErrors = () => setErrors(initialErrors);\n\n const reset = () => {\n setValues(initialValues);\n resetErrors();\n };\n\n const validate = () => {\n let isValid = true;\n\n const validationErrors = Object.keys(values).reduce((acc, field) => {\n if (\n validationRules &&\n typeof validationRules[field] === 'function' &&\n !validationRules[field](values[field], values)\n ) {\n acc[field as keyof T] = errorMessages[field] || true;\n isValid = false;\n } else {\n acc[field as keyof T] = null;\n }\n\n return acc;\n }, {} as ValidationErrors);\n\n setErrors(validationErrors);\n return isValid;\n };\n\n const validateField = (field: keyof T) =>\n setErrors((currentErrors) => ({\n ...currentErrors,\n [field]:\n typeof validationRules[field] === 'function'\n ? validationRules[field](values[field], values)\n ? null\n : errorMessages[field] || true\n : null,\n }));\n\n const setFieldError = (field: keyof T, error: React.ReactNode) =>\n setErrors((currentErrors) => ({ ...currentErrors, [field]: error }));\n\n const setFieldValue = <K extends keyof T, U extends T[K]>(field: K, value: U) => {\n setValues((currentValues) => ({ ...currentValues, [field]: value }));\n setFieldError(field, null);\n };\n\n const onSubmit = (handleSubmit: (values: T) => any) => (event?: React.FormEvent) => {\n event && event.preventDefault();\n validate() && handleSubmit(values);\n };\n\n const getInputProps = <K extends keyof T, U extends T[K]>(\n field: K,\n options?: { type?: 'checkbox' | 'default' }\n ) => ({\n [options?.type === 'checkbox' ? 'checked' : 'value']: values[field],\n onChange: getInputOnChange<U>((val: U) => setFieldValue(field, val)) as any,\n error: errors[field] || undefined,\n });\n\n return {\n values,\n errors,\n validate,\n reset,\n setErrors,\n setValues,\n setFieldValue,\n setFieldError,\n validateField,\n resetErrors,\n onSubmit,\n getInputProps,\n };\n}\n"],"names":["useState","getInputOnChange"],"mappings":"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"}
|
|
@@ -43,6 +43,11 @@ function useResizeObserver() {
|
|
|
43
43
|
}, [ref.current]);
|
|
44
44
|
return [ref, rect];
|
|
45
45
|
}
|
|
46
|
+
function useElementSize() {
|
|
47
|
+
const [ref, { width, height }] = useResizeObserver();
|
|
48
|
+
return { ref, width, height };
|
|
49
|
+
}
|
|
46
50
|
|
|
51
|
+
exports.useElementSize = useElementSize;
|
|
47
52
|
exports.useResizeObserver = useResizeObserver;
|
|
48
53
|
//# sourceMappingURL=use-resize-observer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nconst browser = typeof window !== 'undefined';\n\nexport function useResizeObserver<T extends HTMLElement = any>() {\n const frameID = useRef(0);\n const ref = useRef<T>(null);\n\n const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n const observer = useMemo(\n () =>\n browser\n ? new ResizeObserver((entries: any) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frameID.current);\n\n frameID.current = requestAnimationFrame(() => {\n if (ref.current) {\n setRect(entry.contentRect);\n }\n });\n }\n })\n : null,\n []\n );\n\n useEffect(() => {\n if (ref.current) {\n observer.observe(ref.current);\n }\n\n return () => {\n observer.disconnect();\n\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n }, [ref.current]);\n\n return [ref, rect] as const;\n}\n"],"names":["useRef","useState","useMemo","useEffect"],"mappings":";;;;;;AACA,MAAM,YAAY,GAAG;AACrB,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,GAAG,EAAE,CAAC;AACR,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,SAAS,iBAAiB,GAAG;AACpC,EAAE,MAAM,OAAO,GAAGA,YAAM,CAAC,CAAC,CAAC,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGC,cAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,EAAE,MAAM,QAAQ,GAAGC,aAAO,CAAC,MAAM,OAAO,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAK;AAC3E,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAC7B,IAAI,IAAI,KAAK,EAAE;AACf,MAAM,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC5C,MAAM,OAAO,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM;AACpD,QAAQ,IAAI,GAAG,CAAC,OAAO,EAAE;AACzB,UAAU,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACrC,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;AACjB,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AAC5B,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE;AAC3B,QAAQ,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC9C,OAAO;AACP,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AACpB,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACrB
|
|
1
|
+
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nconst browser = typeof window !== 'undefined';\n\nexport function useResizeObserver<T extends HTMLElement = any>() {\n const frameID = useRef(0);\n const ref = useRef<T>(null);\n\n const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n const observer = useMemo(\n () =>\n browser\n ? new ResizeObserver((entries: any) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frameID.current);\n\n frameID.current = requestAnimationFrame(() => {\n if (ref.current) {\n setRect(entry.contentRect);\n }\n });\n }\n })\n : null,\n []\n );\n\n useEffect(() => {\n if (ref.current) {\n observer.observe(ref.current);\n }\n\n return () => {\n observer.disconnect();\n\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n }, [ref.current]);\n\n return [ref, rect] as const;\n}\n\nexport function useElementSize<T extends HTMLElement = any>() {\n const [ref, { width, height }] = useResizeObserver<T>();\n return { ref, width, height };\n}\n"],"names":["useRef","useState","useMemo","useEffect"],"mappings":";;;;;;AACA,MAAM,YAAY,GAAG;AACrB,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,GAAG,EAAE,CAAC;AACR,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,SAAS,iBAAiB,GAAG;AACpC,EAAE,MAAM,OAAO,GAAGA,YAAM,CAAC,CAAC,CAAC,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGC,cAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,EAAE,MAAM,QAAQ,GAAGC,aAAO,CAAC,MAAM,OAAO,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAK;AAC3E,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAC7B,IAAI,IAAI,KAAK,EAAE;AACf,MAAM,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC5C,MAAM,OAAO,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM;AACpD,QAAQ,IAAI,GAAG,CAAC,OAAO,EAAE;AACzB,UAAU,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACrC,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;AACjB,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AAC5B,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE;AAC3B,QAAQ,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC9C,OAAO;AACP,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AACpB,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACrB,CAAC;AACM,SAAS,cAAc,GAAG;AACjC,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,iBAAiB,EAAE,CAAC;AACvD,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAChC;;;;;"}
|
package/esm/index.js
CHANGED
|
@@ -23,7 +23,7 @@ export { useQueue } from './use-queue/use-queue.js';
|
|
|
23
23
|
export { usePageLeave } from './use-page-leave/use-page-leave.js';
|
|
24
24
|
export { useReducedMotion } from './use-reduced-motion/use-reduced-motion.js';
|
|
25
25
|
export { useScrollIntoView } from './use-scroll-into-view/use-scroll-into-view.js';
|
|
26
|
-
export { useResizeObserver } from './use-resize-observer/use-resize-observer.js';
|
|
26
|
+
export { useElementSize, useResizeObserver } from './use-resize-observer/use-resize-observer.js';
|
|
27
27
|
export { useScrollLock } from './use-scroll-lock/use-scroll-lock.js';
|
|
28
28
|
export { useShallowEffect } from './use-shallow-effect/use-shallow-effect.js';
|
|
29
29
|
export { useBooleanToggle, useToggle } from './use-toggle/use-toggle.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-form.js","sources":["../../src/use-form/use-form.ts"],"sourcesContent":["import React, { useState } from 'react';\nimport { getInputOnChange } from '../use-input-state/use-input-state';\n\nexport type ValidationRule<T> = {\n readonly [P in keyof T]?: (value: T[P], values?: T) => boolean;\n};\n\nexport type UseFormErrors<T> = {\n readonly [P in keyof T]?: React.ReactNode | null;\n};\n\
|
|
1
|
+
{"version":3,"file":"use-form.js","sources":["../../src/use-form/use-form.ts"],"sourcesContent":["import React, { useState } from 'react';\nimport { getInputOnChange } from '../use-input-state/use-input-state';\n\nexport type ValidationRule<T> = {\n readonly [P in keyof T]?: (value: T[P], values?: T) => boolean;\n};\n\nexport type UseFormErrors<T> = {\n readonly [P in keyof T]?: React.ReactNode | null;\n};\n\ninterface UseFormInput<T> {\n validationRules?: ValidationRule<T>;\n errorMessages?: UseFormErrors<T>;\n initialValues: T;\n}\n\nexport interface UseForm<T> {\n values: T;\n errors: Record<keyof T, React.ReactNode>;\n validate: () => boolean;\n reset: () => void;\n setErrors: React.Dispatch<React.SetStateAction<Record<keyof T, React.ReactNode>>>;\n setValues: React.Dispatch<React.SetStateAction<T>>;\n setFieldValue: <K extends keyof T, U extends T[K]>(field: K, value: U) => void;\n setFieldError: (field: keyof T, error: React.ReactNode) => void;\n validateField: (field: keyof T) => void;\n resetErrors: () => void;\n onSubmit: (handleSubmit: (values: T) => any) => (event?: React.FormEvent) => void;\n getInputProps: <K extends keyof T>(\n field: K,\n options?: {\n type?: 'checkbox' | 'default';\n }\n ) => {\n [x: string]: any;\n onChange: any;\n error: Record<keyof T, React.ReactNode>[K];\n };\n}\n\nexport function useForm<T extends { [key: string]: any }>({\n initialValues,\n validationRules = {},\n errorMessages = {},\n}: UseFormInput<T>): UseForm<T> {\n type ValidationErrors = Record<keyof T, React.ReactNode>;\n\n const initialErrors = Object.keys(initialValues).reduce((acc, field) => {\n acc[field as keyof T] = null;\n return acc;\n }, {} as ValidationErrors);\n\n const [errors, setErrors] = useState(initialErrors);\n const [values, setValues] = useState(initialValues);\n\n const resetErrors = () => setErrors(initialErrors);\n\n const reset = () => {\n setValues(initialValues);\n resetErrors();\n };\n\n const validate = () => {\n let isValid = true;\n\n const validationErrors = Object.keys(values).reduce((acc, field) => {\n if (\n validationRules &&\n typeof validationRules[field] === 'function' &&\n !validationRules[field](values[field], values)\n ) {\n acc[field as keyof T] = errorMessages[field] || true;\n isValid = false;\n } else {\n acc[field as keyof T] = null;\n }\n\n return acc;\n }, {} as ValidationErrors);\n\n setErrors(validationErrors);\n return isValid;\n };\n\n const validateField = (field: keyof T) =>\n setErrors((currentErrors) => ({\n ...currentErrors,\n [field]:\n typeof validationRules[field] === 'function'\n ? validationRules[field](values[field], values)\n ? null\n : errorMessages[field] || true\n : null,\n }));\n\n const setFieldError = (field: keyof T, error: React.ReactNode) =>\n setErrors((currentErrors) => ({ ...currentErrors, [field]: error }));\n\n const setFieldValue = <K extends keyof T, U extends T[K]>(field: K, value: U) => {\n setValues((currentValues) => ({ ...currentValues, [field]: value }));\n setFieldError(field, null);\n };\n\n const onSubmit = (handleSubmit: (values: T) => any) => (event?: React.FormEvent) => {\n event && event.preventDefault();\n validate() && handleSubmit(values);\n };\n\n const getInputProps = <K extends keyof T, U extends T[K]>(\n field: K,\n options?: { type?: 'checkbox' | 'default' }\n ) => ({\n [options?.type === 'checkbox' ? 'checked' : 'value']: values[field],\n onChange: getInputOnChange<U>((val: U) => setFieldValue(field, val)) as any,\n error: errors[field] || undefined,\n });\n\n return {\n values,\n errors,\n validate,\n reset,\n setErrors,\n setValues,\n setFieldValue,\n setFieldError,\n validateField,\n resetErrors,\n onSubmit,\n getInputProps,\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -39,6 +39,10 @@ function useResizeObserver() {
|
|
|
39
39
|
}, [ref.current]);
|
|
40
40
|
return [ref, rect];
|
|
41
41
|
}
|
|
42
|
+
function useElementSize() {
|
|
43
|
+
const [ref, { width, height }] = useResizeObserver();
|
|
44
|
+
return { ref, width, height };
|
|
45
|
+
}
|
|
42
46
|
|
|
43
|
-
export { useResizeObserver };
|
|
47
|
+
export { useElementSize, useResizeObserver };
|
|
44
48
|
//# sourceMappingURL=use-resize-observer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nconst browser = typeof window !== 'undefined';\n\nexport function useResizeObserver<T extends HTMLElement = any>() {\n const frameID = useRef(0);\n const ref = useRef<T>(null);\n\n const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n const observer = useMemo(\n () =>\n browser\n ? new ResizeObserver((entries: any) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frameID.current);\n\n frameID.current = requestAnimationFrame(() => {\n if (ref.current) {\n setRect(entry.contentRect);\n }\n });\n }\n })\n : null,\n []\n );\n\n useEffect(() => {\n if (ref.current) {\n observer.observe(ref.current);\n }\n\n return () => {\n observer.disconnect();\n\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n }, [ref.current]);\n\n return [ref, rect] as const;\n}\n"],"names":[],"mappings":";;AACA,MAAM,YAAY,GAAG;AACrB,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,GAAG,EAAE,CAAC;AACR,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,SAAS,iBAAiB,GAAG;AACpC,EAAE,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,OAAO,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAK;AAC3E,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAC7B,IAAI,IAAI,KAAK,EAAE;AACf,MAAM,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC5C,MAAM,OAAO,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM;AACpD,QAAQ,IAAI,GAAG,CAAC,OAAO,EAAE;AACzB,UAAU,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACrC,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;AACjB,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AAC5B,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE;AAC3B,QAAQ,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC9C,OAAO;AACP,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AACpB,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACrB;;;;"}
|
|
1
|
+
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nconst browser = typeof window !== 'undefined';\n\nexport function useResizeObserver<T extends HTMLElement = any>() {\n const frameID = useRef(0);\n const ref = useRef<T>(null);\n\n const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n const observer = useMemo(\n () =>\n browser\n ? new ResizeObserver((entries: any) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frameID.current);\n\n frameID.current = requestAnimationFrame(() => {\n if (ref.current) {\n setRect(entry.contentRect);\n }\n });\n }\n })\n : null,\n []\n );\n\n useEffect(() => {\n if (ref.current) {\n observer.observe(ref.current);\n }\n\n return () => {\n observer.disconnect();\n\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n }, [ref.current]);\n\n return [ref, rect] as const;\n}\n\nexport function useElementSize<T extends HTMLElement = any>() {\n const [ref, { width, height }] = useResizeObserver<T>();\n return { ref, width, height };\n}\n"],"names":[],"mappings":";;AACA,MAAM,YAAY,GAAG;AACrB,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,GAAG,EAAE,CAAC;AACR,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,SAAS,iBAAiB,GAAG;AACpC,EAAE,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,OAAO,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAK;AAC3E,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAC7B,IAAI,IAAI,KAAK,EAAE;AACf,MAAM,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC5C,MAAM,OAAO,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM;AACpD,QAAQ,IAAI,GAAG,CAAC,OAAO,EAAE;AACzB,UAAU,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACrC,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;AACjB,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AAC5B,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE;AAC3B,QAAQ,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC9C,OAAO;AACP,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AACpB,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACrB,CAAC;AACM,SAAS,cAAc,GAAG;AACjC,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,iBAAiB,EAAE,CAAC;AACvD,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAChC;;;;"}
|
package/lib/index.d.ts
CHANGED
|
@@ -24,7 +24,7 @@ export { useQueue } from './use-queue/use-queue';
|
|
|
24
24
|
export { usePageLeave } from './use-page-leave/use-page-leave';
|
|
25
25
|
export { useReducedMotion } from './use-reduced-motion/use-reduced-motion';
|
|
26
26
|
export { useScrollIntoView } from './use-scroll-into-view/use-scroll-into-view';
|
|
27
|
-
export { useResizeObserver } from './use-resize-observer/use-resize-observer';
|
|
27
|
+
export { useResizeObserver, useElementSize } from './use-resize-observer/use-resize-observer';
|
|
28
28
|
export { useScrollLock } from './use-scroll-lock/use-scroll-lock';
|
|
29
29
|
export { useShallowEffect } from './use-shallow-effect/use-shallow-effect';
|
|
30
30
|
export { useToggle, useBooleanToggle } from './use-toggle/use-toggle';
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -5,14 +5,12 @@ export declare type ValidationRule<T> = {
|
|
|
5
5
|
export declare type UseFormErrors<T> = {
|
|
6
6
|
readonly [P in keyof T]?: React.ReactNode | null;
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
interface UseFormInput<T> {
|
|
9
9
|
validationRules?: ValidationRule<T>;
|
|
10
10
|
errorMessages?: UseFormErrors<T>;
|
|
11
11
|
initialValues: T;
|
|
12
12
|
}
|
|
13
|
-
export
|
|
14
|
-
[key: string]: any;
|
|
15
|
-
}>({ initialValues, validationRules, errorMessages, }: UseForm<T>): {
|
|
13
|
+
export interface UseForm<T> {
|
|
16
14
|
values: T;
|
|
17
15
|
errors: Record<keyof T, React.ReactNode>;
|
|
18
16
|
validate: () => boolean;
|
|
@@ -24,12 +22,16 @@ export declare function useForm<T extends {
|
|
|
24
22
|
validateField: (field: keyof T) => void;
|
|
25
23
|
resetErrors: () => void;
|
|
26
24
|
onSubmit: (handleSubmit: (values: T) => any) => (event?: React.FormEvent) => void;
|
|
27
|
-
getInputProps: <
|
|
25
|
+
getInputProps: <K extends keyof T>(field: K, options?: {
|
|
28
26
|
type?: 'checkbox' | 'default';
|
|
29
27
|
}) => {
|
|
30
28
|
[x: string]: any;
|
|
31
29
|
onChange: any;
|
|
32
|
-
error: Record<keyof T, React.ReactNode>[
|
|
30
|
+
error: Record<keyof T, React.ReactNode>[K];
|
|
33
31
|
};
|
|
34
|
-
}
|
|
32
|
+
}
|
|
33
|
+
export declare function useForm<T extends {
|
|
34
|
+
[key: string]: any;
|
|
35
|
+
}>({ initialValues, validationRules, errorMessages, }: UseFormInput<T>): UseForm<T>;
|
|
36
|
+
export {};
|
|
35
37
|
//# sourceMappingURL=use-form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-form.d.ts","sourceRoot":"","sources":["../../src/use-form/use-form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,oBAAY,cAAc,CAAC,CAAC,IAAI;IAC9B,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,KAAK,OAAO;CAC/D,CAAC;AAEF,oBAAY,aAAa,CAAC,CAAC,IAAI;IAC7B,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;CACjD,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"use-form.d.ts","sourceRoot":"","sources":["../../src/use-form/use-form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,oBAAY,cAAc,CAAC,CAAC,IAAI;IAC9B,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,KAAK,OAAO;CAC/D,CAAC;AAEF,oBAAY,aAAa,CAAC,CAAC,IAAI;IAC7B,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;CACjD,CAAC;AAEF,UAAU,YAAY,CAAC,CAAC;IACtB,eAAe,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACjC,aAAa,EAAE,CAAC,CAAC;CAClB;AAED,MAAM,WAAW,OAAO,CAAC,CAAC;IACxB,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACzC,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAClF,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,aAAa,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAChE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAClF,aAAa,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAC/B,KAAK,EAAE,CAAC,EACR,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;KAC/B,KACE;QACH,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;QACjB,QAAQ,EAAE,GAAG,CAAC;QACd,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;KAC5C,CAAC;CACH;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,EACxD,aAAa,EACb,eAAoB,EACpB,aAAkB,GACnB,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAuF9B"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
declare type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;
|
|
3
3
|
export declare function useResizeObserver<T extends HTMLElement = any>(): readonly [import("react").MutableRefObject<T>, ObserverRect];
|
|
4
|
+
export declare function useElementSize<T extends HTMLElement = any>(): {
|
|
5
|
+
ref: import("react").MutableRefObject<T>;
|
|
6
|
+
width: number;
|
|
7
|
+
height: number;
|
|
8
|
+
};
|
|
4
9
|
export {};
|
|
5
10
|
//# sourceMappingURL=use-resize-observer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"names":[],"mappings":";AAEA,aAAK,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;AAepD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,kEAyC5D"}
|
|
1
|
+
{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"names":[],"mappings":";AAEA,aAAK,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;AAepD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,kEAyC5D;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG;;;;EAGzD"}
|