6 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/packages/core/useIsSupported/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useIsSupported } from '.'
2 |
3 | export function Demo() {
4 | const isSupported = useIsSupported(() => !!navigator?.connection)
5 |
6 | return isSupported ? (
7 | oops! this page does not exist
7 |
8 |
9 | Go Home
10 |
11 |
12 | `navigator.connection` Is supported
8 | ) : (
9 | `navigator.connection` Is not supported
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/website/next.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-var-requires */
2 | const withPWA = require('next-pwa')
3 | const runtimeCaching = require('next-pwa/cache')
4 |
5 | module.exports = withPWA({
6 | pwa: {
7 | disable: process.env.NODE_ENV === 'development',
8 | dest: 'public',
9 | runtimeCaching
10 | },
11 | experimental: {
12 | externalDir: true
13 | }
14 | })
15 |
--------------------------------------------------------------------------------
/packages/core/useHover/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react'
2 |
3 | import { useHover } from '.'
4 |
5 | export function Demo() {
6 | const ref = useRef
11 | {isHovered ? 'Hovered' : 'Not Hovered'}
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/packages/core/_ssr.config.ts:
--------------------------------------------------------------------------------
1 | import { isClient } from '@react-hooks-library/shared'
2 |
3 | export const _window = /* #__PURE__ */ isClient ? window : undefined
4 | export const _document = /* #__PURE__ */ isClient ? window.document : undefined
5 | export const _navigator = /* #__PURE__ */ isClient
6 | ? window.navigator
7 | : undefined
8 | export const _location = /* #__PURE__ */ isClient ? window.location : undefined
9 |
--------------------------------------------------------------------------------
/packages/core/useWindowSize/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useWindowSize } from '.'
2 |
3 | export function Demo() {
4 | const { height, width } = useWindowSize()
5 |
6 | return (
7 |
8 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/packages/core/useMount/index.ts:
--------------------------------------------------------------------------------
1 | import { Fn } from '@react-hooks-library/shared'
2 | import { useEffect } from 'react'
3 |
4 | /**
5 | * Run a function when a component is mounted.
6 | *
7 | * @deprecated This hook breaks in React 18's strict mode, since it's not idempotent
8 | *
9 | * @param callback function to be executed
10 | */
11 | export function useMount(callback: Fn) {
12 | useEffect(callback, [])
13 | }
14 |
--------------------------------------------------------------------------------
/website/public/scripts/theme.js:
--------------------------------------------------------------------------------
1 | // A minified version is inlined in _document.tsx
2 |
3 | !(function () {
4 | var b = document.body.classList;
5 | b.remove('dark'); // remove default theme
6 | var e = localStorage.getItem('theme');
7 | if (e) b.add(e.replace(/"/g, ''));
8 | else {
9 | var m = window.matchMedia('(prefers-color-scheme: dark)');
10 | m.matches ? b.add('dark') : b.add('light');
11 | }
12 | })();
13 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/core/useUnMount/index.ts:
--------------------------------------------------------------------------------
1 | import { Fn } from '@react-hooks-library/shared'
2 | import { useEffect } from 'react'
3 |
4 | /**
5 | * Run a function when component is unmounted.
6 | *
7 | * @deprecated This hook breaks in React 18's strict mode, since it's not idempotent
8 | *
9 | * @param callback function to be executed
10 | */
11 | export function useUnMount(func: Fn) {
12 | useEffect(() => {
13 | return func
14 | }, [func])
15 | }
16 |
--------------------------------------------------------------------------------
/website/utils/useSidebar.ts:
--------------------------------------------------------------------------------
1 | import create from 'zustand'
2 |
3 | type SideBarStateProps = {
4 | sidebarOpen: boolean
5 | toggleSideBar: () => void
6 | setSideBar: (open: boolean) => void
7 | }
8 |
9 | export const useSidebar = create
9 | Dimensions - {height} x {width}
10 |
11 |
12 | Resize the window to observe changes
13 |
14 |
8 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/packages/core/usePreferredColorScheme/index.ts:
--------------------------------------------------------------------------------
1 | import { useMediaQuery } from '../useMediaQuery'
2 |
3 | export type ColorSchemeType = 'dark' | 'light'
4 |
5 | /**
6 | * Reactive prefers-color-scheme media query.
7 | *
8 | * @see https://react-hooks-library.vercel.app/core/usePreferredColorScheme
9 | */
10 | export function usePreferredColorScheme() {
11 | const isDark = useMediaQuery('(prefers-color-scheme: dark)')
12 |
13 | return isDark ? 'dark' : 'light'
14 | }
15 |
--------------------------------------------------------------------------------
/packages/core/useMountSync/index.ts:
--------------------------------------------------------------------------------
1 | import { Fn } from '@react-hooks-library/shared'
2 | import { useLayoutEffect } from 'react'
3 |
4 | /**
5 | * Run a function synchronously when a component is mounted and after DOM is painted.
6 | *
7 | * @deprecated This hook breaks in React 18's strict mode, since it's not idempotent
8 | *
9 | * @param callback function to be executed
10 | */
11 | export function useMountSync(callback: Fn) {
12 | useLayoutEffect(callback, [])
13 | }
14 |
--------------------------------------------------------------------------------
/packages/core/useHasMounted/index.ts:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | import { useMount } from '../useMount'
4 |
5 | /**
6 | * Hook that returns whether or not the component has mounted.
7 | * Useful in SSR frameworks like Next or Gatsby.
8 | *
9 | * @returns hasMounted
10 | */
11 | export function useHasMounted() {
12 | const [hasMounted, setHasMounted] = useState(false)
13 |
14 | useMount(() => {
15 | setHasMounted(true)
16 | })
17 |
18 | return hasMounted
19 | }
20 |
--------------------------------------------------------------------------------
/packages/core/usePrevious/index.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react'
2 |
3 | /**
4 | * Returns the value of the argument from the previous render
5 | * @param {T} value
6 | * @returns {T | undefined} previous value
7 | * @see https://react-hooks-library.vercel.app/core/usePrevious
8 | */
9 | export function usePrevious
9 |
10 | x: {x}
11 |
12 |
13 | y: {y}
14 |
15 |
16 |
8 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/packages/core/useOnline/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useOnline } from '.'
2 |
3 | export function Demo() {
4 | const isOnline = useOnline()
5 |
6 | return (
7 | The value of count is - {get()}
9 |
10 |
11 |
12 |
13 |
8 | {isOnline ? (
9 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/packages/core/usePreferredColorScheme/demo.tsx:
--------------------------------------------------------------------------------
1 | import { usePreferredColorScheme } from '.'
2 |
3 | export function Demo() {
4 | const colorScheme = usePreferredColorScheme()
5 |
6 | return (
7 | Online
10 | ) : (
11 | Offline
12 | )}
13 |
14 | Toggle your network to observe changes
15 |
16 |
8 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/packages/core/usePrevious/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | import { usePrevious } from '.'
4 |
5 | export function Demo() {
6 | const [count, setCount] = useState(0)
7 | const previousCount = usePrevious(count)
8 |
9 | return (
10 |
9 | Try switching system color preference to observe change
10 |
11 |
12 | Preferred color scheme is -{' '}
13 | {colorScheme}
14 |
15 |
11 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/jest.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from '@jest/types'
2 |
3 | const config: Config.InitialOptions = {
4 | clearMocks: true,
5 | testEnvironment: 'jsdom',
6 | coverageDirectory: 'coverage',
7 | roots: ['Current Count is - {count}
12 | Previous Count is - {previousCount}
13 |
16 |
18 |
21 |
22 | {mounted ?
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 | .pnp
6 | .pnp.js
7 |
8 | # testing
9 | coverage
10 | # next.js
11 | .next
12 | out
13 |
14 | # production
15 | /build
16 |
17 | # misc
18 | .DS_Store
19 | *.pem
20 | .eslintcache
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | .eslintcache
34 | # vercel
35 | .vercel
36 | dist
--------------------------------------------------------------------------------
/website/ui/docs/mdxComponents.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable jsx-a11y/anchor-has-content */
2 | import Link from 'next/link'
3 |
4 | import { Callout } from './Callout'
5 | import { Playground } from './Playground'
6 | import { Source } from './Source'
7 |
8 | export const mdxComponents = {
9 | Playground,
10 | Source,
11 | Callout,
12 | a({ href = '', ...props }) {
13 | return (
14 |
15 |
16 |
17 | )
18 | },
19 | p(props) {
20 | return
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/core/useIsSupported/index.ts:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | import { useMount } from '../useMount'
4 |
5 | /**
6 | * Is a feature supported in the browser or not
7 | *
8 | * @param predicate - predicate to check if the feature is supported
9 | *
10 | * @see https://react-hooks-library.vercel.app/core/useIsSupported
11 | */
12 | export function useIsSupported(predicate: () => boolean) {
13 | const [isSupported, setIsSupported] = useState(false)
14 |
15 | useMount(() => {
16 | setIsSupported(predicate())
17 | })
18 |
19 | return isSupported
20 | }
21 |
--------------------------------------------------------------------------------
/scripts/utils/testUtils.ts:
--------------------------------------------------------------------------------
1 | import matter from 'gray-matter'
2 |
3 | import type { FunctionMeta } from '../../types'
4 |
5 | export function testDocs(name: string, source: string) {
6 | const meta = matter(source).data as FunctionMeta
7 |
8 | expect(meta).toBeDefined()
9 |
10 | expect(meta).toHaveProperty('name')
11 | expect(meta).toHaveProperty('description')
12 | expect(meta).toHaveProperty('category')
13 |
14 | expect(meta.name).toBe(name)
15 | }
16 |
17 | export function sleep(time = 1000) {
18 | return new Promise((resolve) => setTimeout(resolve, time))
19 | }
20 |
--------------------------------------------------------------------------------
/website/ui/docs/Playground.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | type Props = { children: React.ReactNode }
4 |
5 | export function Playground({ children }: Props) {
6 | return (
7 |
8 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/packages/core/useToggle/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useToggle } from '.'
2 |
3 | export function Demo() {
4 | const { bool, setFalse, setTrue, toggle } = useToggle()
5 |
6 | return (
7 |
9 | DEMO
10 |
11 |
12 | {children}
13 |
14 |
8 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/website/ui/docs/Callout.tsx:
--------------------------------------------------------------------------------
1 | type CalloutProps = {
2 | type: 'info' | 'success' | 'warning' | 'danger'
3 | children: React.ReactNode
4 | }
5 |
6 | export function Callout({ type, children }: CalloutProps) {
7 | const emoji =
8 | type === 'info'
9 | ? '💡'
10 | : type === 'success'
11 | ? '✅'
12 | : type === 'warning'
13 | ? '⚠️'
14 | : '🚨'
15 |
16 | return (
17 | {bool ? '🐵' : '🙈'}
9 |
10 |
11 |
14 |
17 |
18 | 19 |22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /packages/core/useToggle/index.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from 'react' 2 | 3 | /** 4 | * A state toggle hook 5 | * 6 | * @param defaultValue 7 | * @default false 8 | * 9 | * @see https://react-hooks-library.vercel.app/core/useToggle 10 | */ 11 | export function useToggle(defaultValue = false) { 12 | const [bool, setBool] = useState(defaultValue) 13 | 14 | const toggle = useCallback(() => setBool((s) => !s), []) 15 | 16 | const setTrue = useCallback(() => setBool(true), []) 17 | 18 | const setFalse = useCallback(() => setBool(false), []) 19 | 20 | return { bool, toggle, setTrue, setFalse } 21 | } 22 | -------------------------------------------------------------------------------- /website/scripts/buildRoutes.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import { join } from 'path' 3 | 4 | import { getAllFunctionsMeta } from '../utils/loadMDX' 5 | 6 | const indexPath = join(__dirname, '..', 'routes.json') 7 | 8 | async function buildRoutes() { 9 | const functionMeta = (await getAllFunctionsMeta()).map( 10 | ({ name, pkg, category, description }) => ({ 11 | name, 12 | category, 13 | route: `/${pkg}/${name}`, 14 | description 15 | }) 16 | ) 17 | 18 | fs.writeFileSync(indexPath, JSON.stringify(functionMeta, null, 2), { 19 | encoding: 'utf-8' 20 | }) 21 | } 22 | 23 | buildRoutes() 24 | -------------------------------------------------------------------------------- /packages/core/_template/index.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from 'react' 2 | 3 | export function useCounter(initialValue = 0) { 4 | const [count, setCount] = useState(initialValue) 5 | 6 | const inc = useCallback((by = 1) => setCount((c) => c + by), []) 7 | const dec = useCallback((by = 1) => setCount((c) => c - by), []) 8 | const get = () => count 9 | const set = useCallback((val: number) => setCount(val), []) 10 | const reset = useCallback( 11 | (val = initialValue) => { 12 | return set(val) 13 | }, 14 | [initialValue, set] 15 | ) 16 | 17 | return { count, inc, dec, get, set, reset } 18 | } 19 | -------------------------------------------------------------------------------- /packages/core/useOnline/index.ts: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | 3 | import { useEventListener } from '../useEventListener' 4 | import { useMount } from '../useMount' 5 | 6 | /** 7 | * Reactive online status 8 | * 9 | * @see https://react-hooks-library.vercel.app/core/useOnline 10 | */ 11 | export function useOnline() { 12 | const [online, setOnline] = useState(false) 13 | 14 | useMount(() => { 15 | setOnline(navigator.onLine) 16 | }) 17 | 18 | useEventListener('offline', () => { 19 | setOnline(false) 20 | }) 21 | 22 | useEventListener('online', () => { 23 | setOnline(true) 24 | }) 25 | 26 | return online 27 | } 28 | -------------------------------------------------------------------------------- /packages/core/useMountSync/demo.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | 3 | import { useMountSync } from '.' 4 | 5 | function Child() { 6 | useMountSync(() => { 7 | const el = document.querySelector('#mount-sync') 8 | alert(`I have been mounted. I am a <${el?.tagName}> tag`) 9 | }) 10 | 11 | return 12 | } 13 | 14 | export function Demo() { 15 | const [mounted, setMounted] = useState(false) 16 | 17 | return ( 18 |{emoji}20 | {children} 21 |
19 |
22 |
23 | {mounted ?
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/packages/core/useFont/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useFont } from '.'
2 |
3 | export function Demo() {
4 | const fontName = 'JetBrains Mono Custom'
5 | const { error, loaded, font } = useFont(
6 | fontName,
7 | '/fonts/JetBrainsMono-Thin.woff2'
8 | )
9 |
10 | if (error) {
11 | return Error loading font
12 | }
13 |
14 | if (!loaded) {
15 | return Loading Font
16 | }
17 |
18 | return (
19 |
20 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/packages/core/useInterval/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from 'react'
2 |
3 | import { useInterval } from '.'
4 |
5 | export function Demo() {
6 | const [count, setCount] = useState(0)
7 | const [paused, setPaused] = useState(false)
8 |
9 | const increment = useCallback(() => setCount((c) => c + 1), [])
10 |
11 | useInterval(increment, 1000, { paused })
12 |
13 | return (
14 |
21 | New Font Loaded!!!
22 |
23 | Font Family - {font?.family}
24 |
15 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/packages/core/useActiveElement/index.ts:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | import { _document } from '../_ssr.config'
4 | import { useEventListener } from '../useEventListener'
5 |
6 | /**
7 | * Reactive document.activeElement, returns a reference to current active element
8 | *
9 | * @returns current active element (DOM node)
10 | **/
11 | export function useActiveElement() {
12 | const [activeElement, setActiveElement] = useState(
13 | () => _document?.activeElement
14 | )
15 |
16 | useEventListener(
17 | 'focus',
18 | () => setActiveElement(_document?.activeElement),
19 | true
20 | )
21 |
22 | useEventListener('blur', () => setActiveElement(null), true)
23 |
24 | return { activeElement }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/core/useDebounce/index.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 |
3 | /**
4 | * Used to debounce a quickly changing value.
5 | * Will return the latest value after a specified amount of time.
6 | *
7 | * @param {T} value
8 | * @param timeout
9 | * @returns {Readonly
16 | Count - {count}
17 |
18 |
21 |
17 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/packages/core/useUnMount/docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: lifecycle
3 | name: useUnMount
4 | description: Run a function when component is unmounted.
5 | ---
6 |
7 | # useUnMount
8 |
9 | Run a function when component is unmounted.
10 |
11 | ## Usage
12 |
13 | ```tsx
14 | import { useUnMount } from '@react-hooks-library/core'
15 |
16 | function Demo() {
17 | useUnMount(() => {
18 | alert('I have been unMounted')
19 | })
20 |
21 | return
22 | }
23 | ```
24 |
25 | ## Type Declarations
26 |
27 | ```typescript
28 | /**
29 | * Run a function when component is unmounted.
30 | *
31 | * @param callback function to be executed
32 | */
33 | declare function useUnMount(func: Fn): void;
34 | ```
35 |
36 | ## Source
37 |
38 |
18 | Count - {state.count}
19 |
20 |
21 |
24 |
25 |
11 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/packages/core/useSessionStorage/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useSessionStorage } from '.'
2 |
3 | export function Demo() {
4 | const [value, setValue] = useSessionStorage(
5 | 'useSessionStorageKey',
6 | 'Hello World'
7 | )
8 |
9 | return (
10 |
12 | State - {value}
13 |
14 |
15 |
18 | setValue(e.target.value)}
22 | />
23 |
24 |
11 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/scripts/publish.ts:
--------------------------------------------------------------------------------
1 | import { execSync } from 'child_process'
2 | import consola from 'consola'
3 | import { join, resolve } from 'path'
4 |
5 | import { version } from '../package.json'
6 | import { findFunctions } from './utils/findFunctions'
7 |
8 | execSync('yarn build:full', { stdio: 'inherit' })
9 |
10 | let command = 'npm publish --access public'
11 |
12 | if (version.includes('beta')) command += ' --tag beta'
13 |
14 | const rootDir = resolve(__dirname, '..')
15 | const packagesDir = resolve(rootDir, 'packages')
16 | const packages = findFunctions(packagesDir)
17 |
18 | for (const pkg of packages) {
19 | execSync(command, {
20 | stdio: 'inherit',
21 | cwd: join('packages', pkg, 'dist')
22 | })
23 |
24 | consola.success(`Published @react-hooks-library/${pkg}`)
25 | }
26 |
--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": false,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "baseUrl": ".",
18 | "paths": {
19 | "@react-hooks-library/core": ["../packages/core/index.ts"],
20 | "@react-hooks-library/shared": ["../packages/shared/index.ts"]
21 | },
22 | },
23 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
24 | "exclude": ["node_modules"]
25 | }
26 |
--------------------------------------------------------------------------------
/packages/core/useTitle/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useTitle } from '.'
2 |
3 | export function Demo() {
4 | const { title, setTitle } = useTitle()
5 |
6 | function setRawTitle() {
7 | const titleNode = document.head.querySelector('title')
8 | // This will also re-render the component
9 | if (titleNode) titleNode.innerText = 'Some New Title'
10 | }
11 |
12 | return (
13 |
12 | State - {value}
13 |
14 |
15 |
18 | setValue(e.target.value)}
22 | />
23 |
24 |
14 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/packages/core/useEffectAfterMount/index.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react'
2 |
3 | /**
4 | * A useEffect hook does that not run on mount, but only on subsequent updates.
5 | *
6 | * @deprecated This hook breaks in React 18's strict mode, since it's not idempotent
7 | *
8 | * @param effect
9 | * @param deps
10 | *
11 | * @see https://react-hooks-library.vercel.app/core/useEffectAfterMount
12 | */
13 | export function useEffectAfterMount(
14 | effect: React.EffectCallback,
15 | deps?: React.DependencyList | undefined
16 | ) {
17 | const isMounted = useRef(false)
18 |
19 | useEffect(() => {
20 | let cleanup: void | (() => void) = undefined
21 |
22 | if (isMounted.current) {
23 | cleanup = effect()
24 | }
25 |
26 | isMounted.current = true
27 |
28 | return cleanup
29 | }, deps)
30 | }
31 |
--------------------------------------------------------------------------------
/website/ui/Color.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react'
2 |
3 | import { useTheme } from './ThemeProvider'
4 |
5 | export const Color = ({ className = '', varName = '' }) => {
6 | const [color, setColor] = useState('')
7 | const ref = useRef()
8 | const { theme } = useTheme()
9 |
10 | useEffect(() => {
11 | const color = getComputedStyle(ref.current).getPropertyValue(
12 | 'background-color'
13 | )
14 | setColor(color)
15 | }, [theme])
16 |
17 | return (
18 |
15 | Title - {title}
16 |
17 | setTitle(e.target.value)}
21 | className="mt-4"
22 | />
23 |
24 |
27 |
19 |
22 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/packages/core/useScreenShare/demo.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable jsx-a11y/media-has-caption */
2 | import { useScreenShare } from '.'
3 |
4 | export function Demo() {
5 | const { play, ref, stop, isPlaying } = useScreenShare()
6 |
7 | return (
8 |
23 |
26 | {varName}
24 | {color}
25 |
9 |
18 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/packages/core/useMount/docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: lifecycle
3 | name: useMount
4 | description: Run a function when a component is mounted.
5 | ---
6 |
7 | import { Demo } from './demo.tsx'
8 |
9 |
19 |
22 |
25 |
26 |
8 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/packages/core/useEventListener/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useRef, useState } from 'react'
2 |
3 | import { useEventListener } from '.'
4 |
5 | export function Demo() {
6 | const buttonRef = useRef
9 | Select inputs below to see the active element -{' '}
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Current active element is -{' '}
19 |
20 | {(activeElement as HTMLInputElement)?.placeholder || ''}
21 |
22 |
23 |
20 |
21 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/packages/core/useAsyncCallback/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react'
2 |
3 | import { useAsyncCallback } from '.'
4 |
5 | const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
6 |
7 | export function Demo() {
8 | const fn = useCallback(async () => {
9 | await sleep(3000)
10 | return 5000
11 | }, [])
12 |
13 | const [fnState, fnCallback] = useAsyncCallback(fn)
14 |
15 | return (
16 |
22 |
27 | press any key -
23 |
24 | last pressed: {lastPressed}
25 |
26 |
17 | {fnState.isLoading ? (
18 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/packages/core/useOnline/docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: sensors
3 | name: useOnline
4 | description: Reactive online status
5 | ---
6 |
7 | import { Demo } from './demo.tsx'
8 |
9 | Loading...
19 | ) : null}
20 |
21 | {fnState.error ? (
22 | An Error Occurred
23 | ) : null}
24 |
25 | {fnState.data ? {fnState.data}
: null}
26 |
27 |
28 |
27 | {isOnline ?
30 | )
31 | }
32 | ```
33 |
34 | ## Type Declarations
35 |
36 | ```typescript
37 | /**
38 | * Reactive online status
39 | *
40 | * @see https://react-hooks-library.vercel.app/core/useOnline
41 | */
42 | declare function useOnline(): boolean
43 | ```
44 |
45 | ## Source
46 |
47 | Online
: Offline
}
28 | Toggle your network to observe changes
29 |
19 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/packages/core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@react-hooks-library/core",
3 | "version": "0.6.2",
4 | "description": "A collection of hooks and utilities for React",
5 | "publishConfig": {
6 | "registry": "https://registry.npmjs.org/"
7 | },
8 | "keywords": [
9 | "react",
10 | "react hooks",
11 | "@react-hooks-library"
12 | ],
13 | "sideEffects": false,
14 | "exports": {
15 | ".": {
16 | "import": "./index.esm.js",
17 | "require": "./index.cjs.js",
18 | "types": "./index.d.ts"
19 | },
20 | "./*": "./*"
21 | },
22 | "main": "./index.cjs.js",
23 | "types": "./index.d.ts",
24 | "module": "./index.esm.js",
25 | "license": "MIT",
26 | "author": "Arpit-
20 | {Object.entries(network).map(([key, value]) => (
21 |
-
25 |
{key}: 26 |
27 | - {`${value}` ?? 'unknown'} 28 |
24 |
29 | ))}
30 |
9 |
17 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/website/ui/SEO.tsx:
--------------------------------------------------------------------------------
1 | import { DefaultSeo } from 'next-seo'
2 |
3 | export const SEO: React.FC = () => {
4 | return (
5 |
18 |
21 |
24 |
25 |
28 |
31 |
32 | {activeElement?.tagName}
26 | }
27 | ```
28 |
29 | ## Type Declarations
30 |
31 | ```typescript
32 | /**
33 | * Reactive document.activeElement, returns a reference to current active element
34 | *
35 | * @returns current active element (DOM node)
36 | **/
37 | declare function useActiveElement(): {
38 | activeElement: Element | null;
39 | };
40 | ```
41 |
42 | ## Source
43 |
44 | Color Scheme is - {colorScheme}
26 | }
27 | ```
28 |
29 | ## Type Declarations
30 |
31 | ```typescript
32 | declare type ColorSchemeType = 'dark' | 'light'
33 |
34 | /**
35 | * Reactive prefers-color-scheme media query.
36 | *
37 | * @see https://react-hooks-library.vercel.app/core/usePreferredColorScheme
38 | */
39 | declare function usePreferredColorScheme(): "dark" | "light"
40 |
41 | ```
42 |
43 | ## Source
44 |
45 |
29 |
33 | )
34 | }
35 | ```
36 |
37 | ## Type Declarations
38 |
39 | ```typescript
40 | declare function usePreviousCurrent Count is - {count}
30 | Previous Count is - {previousCount}
31 |
32 |
12 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/packages/core/useWindowSize/index.ts:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | import { useEventListener } from '../useEventListener'
4 | import { useMount } from '../useMount'
5 |
6 | export interface WindowSizeOptions {
7 | initialWidth?: number
8 | initialHeight?: number
9 | }
10 |
11 | /**
12 | * Reactive window size.
13 | *
14 | * @param options
15 | *
16 | * @see https://react-hooks-library.vercel.app/core/useWindowSize
17 | */
18 | export function useWindowSize({
19 | initialWidth = Infinity,
20 | initialHeight = Infinity
21 | }: WindowSizeOptions = {}) {
22 | const [width, setWidth] = useState(initialWidth)
23 | const [height, setHeight] = useState(initialHeight)
24 |
25 | useMount(() => {
26 | setWidth(window.innerWidth)
27 | setHeight(window.innerHeight)
28 | })
29 |
30 | useEventListener(
31 | 'resize',
32 | () => {
33 | setWidth(window.innerWidth)
34 | setHeight(window.innerHeight)
35 | },
36 | { passive: true }
37 | )
38 |
39 | return { width, height }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/core/useHover/docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: sensors
3 | name: useHover
4 | description: Detect if a dom element is hovered
5 | ---
6 |
7 | import { Demo } from './demo.tsx'
8 |
9 |
13 |
19 |
14 | Try resizing the window to observe change
15 |
16 | min-width: 1024px
17 | {`${isLargeScreen}`}
18 |
20 |
26 |
21 | Try switching system color preference to observe change
22 |
23 | prefers-color-scheme: dark
24 | {`${prefersDark}`}
25 |
29 | {isHovered ? 'Hovered' : 'Not Hovered'}
30 |
31 | )
32 | }
33 | ```
34 |
35 | ## Type Declarations
36 |
37 | ```typescript
38 | /**
39 | *
40 | * Detect if a dom element is hovered
41 | *
42 | * @param target - The element to listen to
43 | * @returns
44 | */
45 | declare function useHover(target: MaybeRef
22 | This is a dropdown, click outside to close
23 |
24 | )
25 | }
26 |
27 | export function Demo() {
28 | const [isOpen, setIsOpen] = useState(false)
29 |
30 | return (
31 |
32 |
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/website/public/styles/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Inter var';
3 | font-weight: 100 900;
4 | font-display: swap;
5 | font-style: normal;
6 | font-named-instance: 'Regular';
7 | src: url(/fonts/Inter-roman.var.woff2) format('woff2');
8 | }
9 |
10 | @font-face {
11 | font-family: 'Inter var';
12 | font-weight: 100 900;
13 | font-display: swap;
14 | font-style: italic;
15 | font-named-instance: 'Italic';
16 | src: url(/fonts/Inter-italic.var.woff2) format('woff2');
17 | }
18 |
19 | @font-face {
20 | font-family: 'JetBrains Mono';
21 | font-display: swap;
22 | font-weight: 400 600;
23 | src: url(/fonts/JetBrainsMono-Regular.woff2) format('woff2');
24 | }
25 |
26 | @font-face {
27 | font-family: 'JetBrains Mono';
28 | font-display: swap;
29 | font-weight: 100 300;
30 | src: url(/fonts/JetBrainsMono-Thin.woff2) format('woff2');
31 | }
32 |
33 | @font-face {
34 | font-family: 'JetBrains Mono';
35 | font-display: swap;
36 | font-weight: 700 900;
37 | src: url(/fonts/JetBrainsMono-Bold.woff2) format('woff2');
38 | }
39 |
--------------------------------------------------------------------------------
/packages/core/useDebounce/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | import { useDebounce } from '.'
4 |
5 | export function Demo() {
6 | const [text, setText] = useState('Hello')
7 | const [delay, setDelay] = useState(1000)
8 |
9 | const debouncedText = useDebounce(text, delay)
10 |
11 | return (
12 |
33 |
36 |
37 |
38 |
40 |
13 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/packages/core/useScrollIntoView/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react'
2 |
3 | import routes from '../../../website/routes.json'
4 | import { useScrollIntoView } from '.'
5 |
6 | type ListItemProps = { isActive: boolean; name: string }
7 |
8 | function ListItem({ isActive, name }: ListItemProps) {
9 | const activeEl = useRef
14 | setText(e.target.value)}
17 | defaultValue={text}
18 | />
19 |
20 |
21 | Delay(ms)
22 | setDelay(Number(e.target.value))}
29 | />
30 |
31 |
32 |
33 |
34 | Debounced Value - {debouncedText}
35 |
36 |
30 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/website/docs/getting-started.mdx:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | React Hooks Library is a collection of [hooks](https://reactjs.org/docs/hooks-intro.html) and utilities for React.
4 | It is currently available for use in Node environments and works with any react meta framework like next, vite, astro.
5 | Support for Deno and browsers is coming soon.
6 |
7 | -
31 | {routes.map(({ name }) => (
32 |
Hello World
37 | }
38 | ```
39 |
40 | Read the list of [all function](/functions) to know more.
41 |
--------------------------------------------------------------------------------
/packages/core/useHasMounted/docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: state
3 | name: useHasMounted
4 | description: Hook that returns whether or not the component has mounted
5 | ---
6 |
7 | import { Demo } from './demo.tsx'
8 |
9 |
28 | {hasMounted ? 'Mounted' : 'Not Yet Mounted'}
29 |
30 | )
31 | }
32 | ```
33 |
34 | ## Type Declarations
35 |
36 | ```typescript
37 | /**
38 | * Hook that returns whether or not the component has mounted.
39 | * Useful in SSR frameworks like Next or Gatsby.
40 | *
41 | * @returns hasMounted
42 | */
43 | declare function useHasMounted(): boolean
44 | ```
45 |
46 | ## Source
47 |
48 |
27 | Dimensions - {height} x {width}
28 |
29 | )
30 | }
31 | ```
32 |
33 | ## Type Declarations
34 |
35 | ```typescript
36 | interface WindowSizeOptions {
37 | initialWidth?: number
38 | initialHeight?: number
39 | }
40 | /**
41 | * Reactive window size.
42 | *
43 | * @param options
44 | *
45 | * @see https://react-hooks-library.vercel.app/core/useWindowSize
46 | */
47 | declare function useWindowSize({
48 | initialWidth,
49 | initialHeight
50 | }?: WindowSizeOptions): {
51 | width: number
52 | height: number
53 | }
54 | ```
55 |
56 | ## Source
57 |
58 |
22 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/packages/core/useStateCompare/index.ts:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction, useCallback, useState } from 'react'
2 |
3 | export type UseStateCompare
23 | First effect -{' '}
24 |
25 | {firstEffect ? 'ran' : 'did not run'}
26 |
27 |
28 |
29 | Second effect -{' '}
30 |
31 | {secondEffect ? 'ran' : 'did not run'}
32 |
33 |
34 |
35 | `navigator.connection` Is supported
27 | ) : (
28 | `navigator.connection` Is not supported
29 | )
30 | }
31 | ```
32 |
33 | ## Type Declarations
34 |
35 | ```typescript
36 | /**
37 | * Is a feature supported in the browser or not
38 | *
39 | * @param predicate - predicate to check if the feature is supported
40 | *
41 | * @see https://react-hooks-library.vercel.app/core/useIsSupported
42 | */
43 | declare function useIsSupported(predicate: () => boolean): boolean
44 | ```
45 |
46 | ## Source
47 |
48 |
29 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/packages/core/useMountSync/docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: lifecycle
3 | name: useMountSync
4 | description: Run a function synchronously when a component is mounted but after DOM is painted.
5 | ---
6 |
7 | import { Demo } from './demo.tsx'
8 |
9 |
30 | {observed
31 | ? 'Observed attribute change to node'
32 | : 'No changes observed yet'}
33 |
34 |
35 |
38 |
13 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/packages/core/useMediaQuery/index.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 |
3 | import { useMount } from '../useMount'
4 |
5 | /**
6 | * Reactive media query hook that returns the truthy value of the media query.
7 | *
8 | * @param {string} query
9 | * @returns {boolean} boolean value of the query
10 | *
11 | * @see https://react-hooks-library.vercel.app/core/useMediaQuery
12 | */
13 | export function useMediaQuery(query: string): boolean {
14 | const [matches, setMatches] = useState(false)
15 |
16 | useMount(() => {
17 | setMatches(window.matchMedia(query).matches)
18 | })
19 |
20 | useEffect(() => {
21 | const mediaQuery = window.matchMedia(query)
22 | const handler = (event: MediaQueryListEvent) => {
23 | setMatches(event.matches)
24 | }
25 |
26 | // Add event listener for old safari browsers
27 | 'addEventListener' in mediaQuery
28 | ? mediaQuery.addEventListener('change', handler)
29 | : mediaQuery.addListener(handler)
30 |
31 | return () => {
32 | 'addEventListener' in mediaQuery
33 | ? mediaQuery.removeEventListener('change', handler)
34 | : mediaQuery.removeListener(handler)
35 | }
36 | }, [query])
37 |
38 | return matches
39 | }
40 |
--------------------------------------------------------------------------------
/packages/core/useLocation/docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: browser
3 | name: useLocation
4 | description: Reactive browser location.
5 | ---
6 |
7 | import { Demo } from './demo.tsx'
8 |
9 |
14 | {inView ? (
15 |
20 | Visible
16 | ) : (
17 | Not Visible
18 | )}
19 |
23 |
32 | Scroll Down
24 |
25 |
31 |
28 | Inner Box
29 |
30 |
27 |
31 | )
32 | }
33 | ```
34 |
35 | ## Type Declarations
36 |
37 | ```typescript
38 | interface Location {
39 | trigger: string
40 | state?: any
41 | length?: number
42 | hash?: string
43 | host?: string
44 | hostname?: string
45 | href?: string
46 | origin?: string
47 | pathname?: string
48 | port?: string
49 | protocol?: string
50 | search?: string
51 | }
52 | /**
53 | * Reactive browser location.
54 | *
55 | * @see https://react-hooks-library.vercel.app/core/useLocation
56 | *
57 | */
58 | declare function useLocation(): Location | null
59 | ```
60 |
61 | ## Source
62 |
63 |
28 | {JSON.stringify(router, null, 2)}
29 |
30 |
27 |
34 | )
35 | }
36 | ```
37 |
38 | ## Type Declarations
39 |
40 | ```typescript
41 | /**
42 | * A state toggle hook
43 | *
44 | * @param defaultValue
45 | * @default false
46 | *
47 | * @see https://react-hooks-library.vercel.app/core/useToggle
48 | */
49 | declare function useToggle(defaultValue?: boolean): {
50 | bool: boolean
51 | toggle: () => void
52 | setTrue: () => void
53 | setFalse: () => void
54 | }
55 | ```
56 |
57 | ## Source
58 |
59 | {bool ? '🐵' : '🙈'}
28 |
29 |
30 |
31 |
32 |
33 |
17 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/packages/core/BreakPointHooks/breakpoints.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Breakpoints from Tailwind V2
3 | *
4 | * @see https://tailwindcss.com/docs/breakpoints
5 | */
6 | export const breakpointsTailwind = {
7 | sm: 640,
8 | md: 768,
9 | lg: 1024,
10 | xl: 1280,
11 | '2xl': 1536
12 | }
13 |
14 | /**
15 | * Breakpoints from Bootstrap V5
16 | *
17 | * @see https://getbootstrap.com/docs/5.0/layout/breakpoints
18 | */
19 | export const breakpointsBootstrapV5 = {
20 | sm: 576,
21 | md: 768,
22 | lg: 992,
23 | xl: 1200,
24 | xxl: 1400
25 | }
26 |
27 | /**
28 | * Breakpoints from Vuetify V2
29 | *
30 | * @see https://vuetifyjs.com/en/features/breakpoints
31 | */
32 | export const breakpointsVuetify = {
33 | xs: 600,
34 | sm: 960,
35 | md: 1264,
36 | lg: 1904
37 | }
38 |
39 | /**
40 | * Breakpoints from Ant Design
41 | *
42 | * @see https://ant.design/components/layout/#breakpoint-width
43 | */
44 | export const breakpointsAntDesign = {
45 | xs: 480,
46 | sm: 576,
47 | md: 768,
48 | lg: 992,
49 | xl: 1200,
50 | xxl: 1600
51 | }
52 |
53 | /**
54 | * Sematic Breakpoints
55 | */
56 | export const breakpointsSematic = {
57 | mobileS: 320,
58 | mobileM: 375,
59 | mobileL: 425,
60 | tablet: 768,
61 | laptop: 1024,
62 | laptopL: 1440,
63 | desktop4K: 2560
64 | }
65 |
--------------------------------------------------------------------------------
/packages/core/useScroll/index.ts:
--------------------------------------------------------------------------------
1 | import { MaybeRef, round, unRef } from '@react-hooks-library/shared'
2 |
3 | import { _document } from '../_ssr.config'
4 | import { useEventListener } from '../useEventListener'
5 |
6 | /**
7 | * Reactive scroll values for a react ref or a dom node
8 | *
9 | * @param target - dom node or react ref
10 | * @param callback - callback to run on scroll
11 | *
12 | * @see https://react-hooks-library.vercel.app/core/useScroll
13 | */
14 | export function useScroll(
15 | target: MaybeRef
18 | Try resizing the window to observe change
19 |
20 |
21 | Size greater than "md" -
22 | {`${greater}`}
23 |
24 |
25 | Size greater than "md" (non reactive) -
26 | {`${greaterNonReactive}`}
30 |
31 |
32 | Size between "md" and "lg"-
33 | {`${between}`}
34 |
35 |
15 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/packages/core/useStateHistory/demo.tsx:
--------------------------------------------------------------------------------
1 | import { useStateHistory } from '.'
2 |
3 | const uid = () =>
4 | Date.now().toString(36) + Math.random().toString(36).substring(2)
5 |
6 | export function Demo() {
7 | const { state, undo, redo, push, history, reset, redoAllowed } =
8 | useStateHistory({ num: 0, id: uid() }, { maxHistory: 5 })
9 |
10 | return (
11 |
16 |
27 |
17 |
26 |
18 | Horizontally scrolled -{' '}
19 | {(scroll.x * 100).toFixed(0)}%
20 |
21 |
22 | Vertically scrolled -{' '}
23 | {(scroll.y * 100).toFixed(0)}%
24 |
25 |
30 |
35 |
31 | Scroll Vertically and Horizontally
32 |
33 |
34 |
12 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/packages/core/useDebounce/docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: utilities
3 | name: useDebounce
4 | description: Used to debounce a quickly changing value. Will return the latest value after a specified amount of time.
5 | ---
6 |
7 | import { Demo } from './demo.tsx'
8 |
9 |
13 | Current State: {state.num}
14 |
15 |
16 |
28 | -
17 | {history.map(({ num, id }) => (
18 |
- 23 | {num} 24 | 25 | ))} 26 |
29 |
32 |
33 |
36 |
37 |
38 |
29 | setText(e.target.value)}
32 | defaultValue={text}
33 | />
34 |
36 | )
37 | }
38 | ```
39 |
40 | ## Type Declarations
41 |
42 | ```typescript
43 | declare function useDebounceDebounced Value - {debouncedText}
35 |
29 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@react-hooks-library/website",
3 | "version": "0.6.2",
4 | "description": "Documentation website for react",
5 | "author": "Arpit
30 | Use
31 |
42 | w
32 | a
33 | s
34 | d
35 | or
36 | ↑
37 | ←
38 | ↓
39 | →
40 | to move the orb
41 |
43 |
48 |
49 | Count - {count}
31 | }
32 | ```
33 |
34 | ### Options
35 |
36 | - `immediate` - when true, the callback will execute on before setting a timer
37 | - `paused` - pause the execution of your callback
38 |
39 | ## Type Declarations
40 |
41 | ```typescript
42 | declare type UseIntervalOptions = {
43 | immediate: boolean
44 | paused: boolean
45 | }
46 | /**
47 | * Run a function repeatedly at a specified interval.
48 | *
49 | * @see https://react-hooks-library.vercel.app/core/useInterval
50 | */
51 | declare function useInterval
40 |
42 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/packages/core/useClickOutside/index.ts:
--------------------------------------------------------------------------------
1 | import type { MaybeRef } from '@react-hooks-library/shared'
2 | import { unRef } from '@react-hooks-library/shared'
3 | import { useCallback } from 'react'
4 |
5 | import { _window } from '../_ssr.config'
6 | import { useEventListener } from '../useEventListener'
7 |
8 | export type ClickOutsideEvents = Pick<
9 | WindowEventMap,
10 | | 'mousedown'
11 | | 'mouseup'
12 | | 'touchstart'
13 | | 'touchend'
14 | | 'pointerdown'
15 | | 'pointerup'
16 | >
17 | export interface ClickOutsideOptions
30 | {isLargeScreen ? 'The screen is large' : 'The screen is small'}
31 |
32 |
33 | {prefersDark ? 'User prefers dark mode' : 'User prefers light mode'}
34 |
35 |
36 | )
37 | ```
38 |
39 | ## Type Declarations
40 |
41 | ```typescript
42 | /**
43 | * Reactive media query hook that returns the truthy value of the media query.
44 | *
45 | * @param {string} query
46 | * @returns {boolean} boolean value of the query
47 | *
48 | * @see https://react-hooks-library.vercel.app/core/useMediaQuery
49 | */
50 | declare function useMediaQuery(query: string): boolean
51 | ```
52 |
53 | ## Recommended Reading
54 |
55 | - [Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
56 |
57 | ## Source
58 |
59 | Error loading font
31 | }
32 |
33 | if (!loaded) {
34 | return Loading Font
35 | }
36 |
37 | return (
38 |
39 |
42 | )
43 | }
44 | ```
45 |
46 | ## Type Declarations
47 |
48 | ```typescript
49 | /**
50 | * React FontFace, a hook to load fonts asynchronously
51 | *
52 | * @param family
53 | * @param source
54 | * @param descriptors
55 | *
56 | * @see https://react-hooks-library.vercel.app/core/useFont
57 | */
58 | declare function useFont(
59 | family: string,
60 | source: string | Blob,
61 | descriptors?: FontFaceDescriptors
62 | ): {
63 | loaded: boolean
64 | error: boolean
65 | font: FontFace | null
66 | }
67 | ```
68 |
69 | ## Source
70 |
71 | New Font Loaded!!!
40 | Font Family - {font?.family}
41 |
27 |
36 | )
37 | }
38 | ```
39 |
40 | ## Type Declarations
41 |
42 | ```typescript
43 | declare type NetworkEffectiveType = 'slow-2g' | '2g' | '3g' | '4g' | undefined;
44 | interface NetworkInformation extends EventTarget {
45 | readonly effectiveType?: NetworkEffectiveType;
46 | readonly downlinkMax?: number;
47 | readonly downlink?: number;
48 | readonly rtt?: number;
49 | readonly saveData?: boolean;
50 | onchange?: EventListener;
51 | }
52 | /**
53 | * Reactive Network status.
54 | *
55 | * @see https://react-hooks-library.vercel.app/core/useNetwork
56 | */
57 | declare function useNetwork(): {
58 | isSupported: boolean;
59 | isOnline: boolean;
60 | offlineAt: number | undefined;
61 | saveData: boolean | undefined;
62 | rtt: number | undefined;
63 | downlink: number | undefined;
64 | downlinkMax: number | undefined;
65 | effectiveType: NetworkEffectiveType;
66 | };
67 | ```
68 |
69 | ## Source
70 |
71 | -
28 | {Object.entries(network).map(([key, value]) => (
29 |
- {key}: 31 |
- {`${value}` ?? 'unknown'} 32 |
30 |
33 | ))}
34 |
33 |
36 |
50 | ))}
51 |
52 |
53 | )
54 | }
55 |
--------------------------------------------------------------------------------
/packages/core/useAsyncCallback/docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | category: state
3 | name: useAsyncCallback
4 | description: Returns a current execution state of an async function.
5 | ---
6 |
7 | import { Demo } from './demo.tsx'
8 |
9 | Functions
34 | {Object.keys(groupedRoutes).map((category) => ( 35 |37 | {category} 38 |
39 |-
40 | {groupedRoutes[category].map(({ name, route, description }) => (
41 |
-
42 |
43 | {name}
44 |
45 |
{description}
46 |
47 | ))}
48 |
35 | {fnState.isLoading ?
43 | )
44 | }
45 | ```
46 |
47 | ## Type Declarations
48 |
49 | ```typescript
50 | declare type UseAsyncStateLoading...
: null}
36 |
37 | {fnState.error ? An Error Occurred
: null}
38 |
39 | {fnState.data ? {fnState.data}
: null}
40 |
41 |
42 |
34 |
43 | )
44 | }
45 | ```
46 |
47 | ```tsx
48 | function Demo() {
49 | const { title } = useTitle('Default Title')
50 |
51 | return (
52 | Title - {title}
35 | setTitle(e.target.value)}
39 | />
40 |
41 |
42 |
53 |
55 | )
56 | }
57 | ```
58 |
59 | ## Type Declarations
60 |
61 | ```typescript
62 | /**
63 | * Reactive document title hook
64 | *
65 | * Set title or observe dom mutation reactively
66 | *
67 | * @param newTitle optional
68 | * @see https://react-hooks-library.vercel.app/core/useTitle
69 | */
70 | declare function useTitle(newTitle?: string): {
71 | title: string
72 | setTitle: react.DispatchTitle - {title}
54 |
43 |
47 | )
48 | }
49 | ```
50 |
51 | ## Type Declarations
52 |
53 | ```typescript
54 | /**
55 | * A useEffect hook does that not run on mount, but only on subsequent updates.
56 | *
57 | * @param effect
58 | * @param deps
59 | *
60 | * @see https://react-hooks-library.vercel.app/core/useEffectAfterMount
61 | */
62 | declare function useEffectAfterMount(
63 | effect: React.EffectCallback,
64 | deps?: React.DependencyList | undefined
65 | ): void
66 | ```
67 |
68 | ## Source
69 |
70 | First effect - {firstEffect ? 'ran' : 'did not run'}
44 | Second effect - {secondEffect ? 'ran' : 'did not run'}
45 |
46 |
31 |
33 | ) : (
34 | <>
35 |
45 |
47 |
27 |
34 |
43 | )
44 | }
45 | ```
46 |
47 | ## Type Declarations
48 |
49 | ```typescript
50 | interface UseScreenShareOptions {
51 | /**
52 | * If the stream video media constraints
53 | *
54 | * @default true
55 | */
56 | video?: boolean | MediaTrackConstraints | undefined
57 | /**
58 | * If the stream audio media constraints
59 | *
60 | * @default true
61 | */
62 | audio?: boolean | MediaTrackConstraints | undefined
63 | }
64 |
65 | /**
66 | * Reactive screen sharing
67 | *
68 | * @param options
69 | *
70 | * @see https://react-hooks-library.vercel.app/core/useScreenShare
71 | */
72 | declare function useScreenShare(options?: UseScreenShareOptions): {
73 | isSupported: boolean
74 | isPlaying: boolean
75 | ref: react.MutableRefObject
35 |
38 |
41 |
42 |
30 |
36 | )
37 | }
38 | ```
39 |
40 | ### Using custom serialize and deserialize options
41 |
42 | The default for `serialize` is `JSON.stringify` and the default for `deserialize` is `JSON.parse`.
43 |
44 | ```tsx
45 | const [value, setValue] = useLocalStorage('key', 'value', {
46 | serialize: JSON.stringify,
47 | deserialize: JSON.parse
48 | })
49 | ```
50 |
51 | ## Type Declarations
52 |
53 | ```typescript
54 | declare type UseLocalStorageOptions = {
55 | /**
56 | * Function for converting to string.
57 | *
58 | * @default JSON.stringify
59 | */
60 | serialize: (value: unknown) => string
61 | /**
62 | * Function to convert stored string to object value.
63 | *
64 | * @default JSON.parse
65 | */
66 | deserialize: (value: string) => unknown
67 | }
68 | /**
69 | * Modified `useState` hook that syncs with localStorage.
70 | *
71 | * @param key
72 | * @param initialValue
73 | * @param options
74 | *
75 | * @see https://react-hooks-library.vercel.app/core/useLocalStorage
76 | */
77 | declare function useLocalStorageState - {value}
31 |
34 | setValue(e.target.value)} type="text" id="demo" />
35 |
30 |
36 | )
37 | }
38 | ```
39 |
40 | ### Using custom serialize and deserialize options
41 |
42 | The default for `serialize` is `JSON.stringify` and the default for `deserialize` is `JSON.parse`.
43 |
44 | ```tsx
45 | const [value, setValue] = useSessionStorage('key', 'value', {
46 | serialize: JSON.stringify,
47 | deserialize: JSON.parse
48 | })
49 | ```
50 |
51 | ## Type Declarations
52 |
53 | ```typescript
54 | declare type UseSessionStorageOptions = {
55 | /**
56 | * Function for converting to string.
57 | *
58 | * @default JSON.stringify
59 | */
60 | serialize: (value: unknown) => string
61 | /**
62 | * Function to convert stored string to object value.
63 | *
64 | * @default JSON.parse
65 | */
66 | deserialize: (value: string) => unknown
67 | }
68 | /**
69 | * Modified `useState` hook that syncs with useSessionStorage.
70 | *
71 | * @param key
72 | * @param initialValue
73 | * @param options
74 | *
75 | * @see https://react-hooks-library.vercel.app/core/useSessionStorage
76 | */
77 | declare function useSessionStorageState - {value}
31 |
34 | setValue(e.target.value)} type="text" id="demo" />
35 | This is a dropdown, click outside to close
37 | }
38 |
39 | export function Demo() {
40 | const [isOpen, setIsOpen] = useState(false)
41 |
42 | return (
43 |
44 |
53 | )
54 | }
55 | ```
56 |
57 | ## Type Declarations
58 |
59 | ```typescript
60 | declare type ClickOutsideEvents = Pick<
61 | WindowEventMap,
62 | | 'mousedown'
63 | | 'mouseup'
64 | | 'touchstart'
65 | | 'touchend'
66 | | 'pointerdown'
67 | | 'pointerup'
68 | >
69 | interface ClickOutsideOptions
45 |
48 |
49 |
50 |
52 |
46 |
51 | )
52 | }
53 | ```
54 |
55 | ## Type Declarations
56 |
57 | ```typescript
58 | declare type UseStateCompareCount - {state.count}
47 |
50 |
27 | x: {x}
28 |
29 | y: {y} 30 |
31 | )
32 | }
33 | ```
34 |
35 | ### Position Types
36 |
37 | ```tsx
38 | // use clientX and clientY
39 | const { x, y } = useMouse({ type: 'client' })
40 |
41 | // use pageX and pageY
42 | const { x, y } = useMouse({ type: 'page' })
43 | ```
44 |
45 | ## Options
46 |
47 | - `type` - Mouse position type, `'page'` or `'client'`. Default is `'client'`.
48 |
49 | - `touch` - Enable or disable touch events, default is `true`.
50 |
51 | - `resetOnTouchEnds` - Reset to initial value when `touchend` event fired
52 |
53 | - `initialValue` - Initial x and y position, default is `{ x: 0, y: 0 }`
54 |
55 | ## Type Declarations
56 |
57 | ```typescript
58 | declare type Position = {
59 | x: number
60 | y: number
61 | }
62 | interface MouseOptions {
63 | /**
64 | * Mouse position based by page or client
65 | *
66 | * @default 'client'
67 | */
68 | type?: 'page' | 'client'
69 | /**
70 | * Listen to `touchmove` events
71 | *
72 | * @default true
73 | */
74 | touch?: boolean
75 | /**
76 | * Reset to initial value when `touchend` event fired
77 | *
78 | * @default false
79 | */
80 | resetOnTouchEnds?: boolean
81 | /**
82 | * Initial values
83 | */
84 | initialValue?: Position
85 | }
86 |
87 | declare type MouseSource = 'mouse' | 'touch' | null
88 | /**
89 | *
90 | * Reactive mouse position based by page or client
91 | *
92 | * @param options
93 | *
94 | * @see https://react-hooks-library.vercel.app/core/useMouse
95 | */
96 | declare function useMouse(options?: MouseOptions): {
97 | x: number
98 | y: number
99 | source: MouseSource
100 | }
101 | ```
102 |
103 | ## Source
104 |
105 | 29 | y: {y} 30 |
28 |
38 | )
39 | }
40 | ```
41 |
42 | ### Functions
43 |
44 | - `push`
45 |
46 | Push new state to history
47 |
48 | - `undo`
49 |
50 | Undo action and go back to previous state
51 |
52 | - `redo`
53 |
54 | Redo actions that were just undid with the undo function.
55 | Only allowed after an undo or a another redo action.
56 | Disabled right after a push action.
57 |
58 | - `redoAllowed`
59 |
60 | Returns true if redo is allowed, false otherwise.
61 |
62 | - `reset`
63 |
64 | Reset to last saved state
65 |
66 | - `history`
67 |
68 | The entire history of saved states.
69 |
70 | ## Type Declarations
71 |
72 | ```typescript
73 | declare type UseStateHistoryOptions = {
74 | /**
75 | * Max number of history states to be stores
76 | *
77 | * @default 10
78 | */
79 | maxHistory?: number
80 | }
81 |
82 | /**
83 | *
84 | * useState with built in undo and redo history control
85 | *
86 | * @param defaultValue
87 | * @param options
88 | * @returns
89 | */
90 | declare function useStateHistoryState: {state}
29 |
30 |
31 |
32 |
35 |
36 |
37 | 71 | {category} 72 |
73 |-
74 | {groupedRoutes[category].map(({ name, route }) => (
75 |
34 |
37 | )
38 | }
39 | ```
40 |
41 | ### A Scroll Progress Bar Example
42 |
43 | ```tsx
44 | import { useRef } from 'react'
45 | import { useScroll } from '@react-hooks-library/core'
46 |
47 | export function Demo() {
48 | const box = useRefScroll Vertically and Horizontally
35 |
36 |
59 |
60 |
61 | )
62 | }
63 | ```
64 |
65 | ## A Note on Performance
66 |
67 | You should avoid updating state inside the hook's callback if possible, updating state on every scroll action can be expensive and cause performance issues.
68 |
69 | The first example above update updates state for demonstration only.
70 |
71 | The second example updates the progress bar's width on every scroll action by mutating the DOM and hence bypassing any react related code.
72 |
73 | ## Type Declarations
74 |
75 | ```typescript
76 | /**
77 | * Reactive scroll values for a react ref or a dom node
78 | *
79 | * @param target - dom node or react ref
80 | * @param callback - callback to run on scroll
81 | *
82 | * @see https://react-hooks-library.vercel.app/core/useScroll
83 | */
84 | declare function useScroll(target: MaybeRef
49 |
59 | )
60 | }
61 | ```
62 |
63 | ## Type Declarations
64 |
65 | ```typescript
66 | interface UseScrollIntoViewOptions extends ScrollIntoViewOptions {
67 | /**
68 | * Defines vertical alignment.
69 | * One of `'start'`, `'center'`, `'end'`, or `'nearest'`
70 | *
71 | * @default 'start'
72 | */
73 | block?: ScrollLogicalPosition
74 | /**
75 | * Defines horizontal alignment.
76 | * One of `start`, `center`, `end`, or `nearest`. Defaults to nearest.
77 | *
78 | * @default 'nearest'
79 | */
80 | inline?: ScrollLogicalPosition
81 | /**
82 | * Defines the transition animation.
83 | * One of 'auto' or 'smooth'.
84 | *
85 | * @default 'auto'
86 | */
87 | behavior?: ScrollBehavior
88 | /**
89 | * The margin around the element to make sure it's visible.
90 | *
91 | * @default '0px'
92 | */
93 | scrollMargin?: string
94 | /**
95 | * The condition to decide if the element should be scrolled into view.
96 | *
97 | * @default true
98 | */
99 | predicate?: boolean | (() => boolean)
100 | }
101 | /**
102 | *
103 | * A hook to scroll an element into view on mounting.
104 | *
105 | * @param options {UseScrollIntoViewOptions}
106 | *
107 | * @see https://react-hooks-library.vercel.app/core/useScrollIntoView
108 | */
109 | declare function useScrollIntoView(
110 | target: MaybeRef-
50 | {routes.map((name) => (
51 |
50 |
60 | )
61 | }
62 |
63 | ```
64 |
65 | ```tsx
66 | import { useMutationObserver } from '@react-hooks-library/core'
67 |
68 | export function Demo() {
69 |
70 | const { isSupported, stop } = useMutationObserver(
71 | document.querySelector('#my-element'),
72 | (mutations) => {
73 | for (const mutation of mutations) {
74 | if (mutation.type === 'childList') {
75 | console.log("Observer change to child nodes")
76 | }
77 | }
78 | },
79 | { childList: true }
80 | )
81 | }
82 | ```
83 |
84 | ## Type Declarations
85 |
86 | ```typescript
87 | /**
88 | * Watch for changes being made to the DOM tree.
89 | *
90 | * @param target - React ref or DOM node
91 | * @param callback - callback to execute when mutations are observed
92 | * @param options - Options passed to mutation observer
93 | *
94 | * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
95 | * @see https://react-hooks-library.vercel.app/core/useMutationObserver
96 | */
97 | declare function useMutationObserver(
98 | target: MaybeRef
51 | {observed
52 | ? 'Observed attribute change to node'
53 | : 'No changes observed yet'}
54 |
55 |
56 |
59 |
33 |
42 | )
43 |
44 | const Features = () => (
45 |
34 | 
35 | 
36 |
37 |
35 |
36 |
38 |
39 |
40 |
41 |
39 |
40 |
46 | {features.map(({ img, description, title }) => (
47 |
48 |
61 | ))}
62 |
63 | )
64 |
65 | const CallToAction = () => (
66 | <>
67 |
49 |
56 |
50 |
55 | {img}
51 |
52 | {img}
53 |
54 |
57 |
60 | {title}
58 |{description}
59 |
68 |
73 | A collection of hooks and utilities for React
69 |
70 | npm i @react-hooks-library/core
71 |
72 |
74 |
75 |
76 | Get Started
77 |
78 |
79 |
80 |
81 | All Functions
82 |
83 |
84 |
85 |
86 | )
87 |
88 | export default function Home() {
89 | return (
90 |
91 |
107 | )
108 | }
109 |
--------------------------------------------------------------------------------
92 |
95 |