5 | Hello
7 | 1`] = `"world
6 | Hello
"`;
8 |
9 | exports[`useServerPromises() should use custom renderer:
10 | world
11 | Hello
13 | 1`] = `"world
12 | Hello
"`;
14 |
--------------------------------------------------------------------------------
/packages/counter/types/index.d.ts:
--------------------------------------------------------------------------------
1 | declare const useCounter: (
2 | initialValue?: number,
3 | options?: UseCounterOptions
4 | ) => {
5 | value: number
6 | set: (value: number) => void
7 | incr: (by?: any) => void
8 | decr: (by?: any) => void
9 | }
10 | export interface UseCounterOptions {
11 | min?: number
12 | max?: number
13 | cast?: (value: number) => number
14 | step?: number
15 | onMin?: (set: (value: number) => void) => void
16 | onMax?: (set: (value: number) => void) => void
17 | }
18 | export default useCounter
19 |
--------------------------------------------------------------------------------
/packages/change/src/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import usePrevious from '@react-hook/previous'
3 | import useLatest from '@react-hook/latest'
4 |
5 | const useChange = world
3
1`] = `
4 |
6 | 3
7 |
8 | 1
1`] = `
18 |
20 | 1
21 |
22 | null
1`] = `
26 |
28 | null
29 |
30 |
23 | {value} {!stop &&
25 | )
26 | }
27 |
28 | const html = await loadPromises(
31 | Hello
33 | `)
34 | })
35 |
36 | it('should use custom renderer', async () => {
37 | const Component = ({value, stop = false}) => {
38 | const {push} = useServerPromises()
39 |
40 | React.useEffect(() => {
41 | push(Promise.resolve(value))
42 | }, [push, value])
43 |
44 | return (
45 | world
32 |
46 | {value} {!stop &&
48 | )
49 | }
50 |
51 | const html = await loadPromises(
54 | Hello
56 | `)
57 | })
58 | })
59 |
--------------------------------------------------------------------------------
/packages/hover/src/index.test.tsx:
--------------------------------------------------------------------------------
1 | import {fireEvent} from '@testing-library/react'
2 | import {renderHook, act} from '@testing-library/react-hooks'
3 | import useHover from './index'
4 |
5 | it('responds to enters and leaves', () => {
6 | const element = document.createElement('div')
7 |
8 | const {result} = renderHook(() => useHover(element))
9 |
10 | expect(result.current).toBe(false)
11 |
12 | act(() => {
13 | fireEvent.mouseEnter(element)
14 | })
15 | expect(result.current).toBe(true)
16 |
17 | act(() => {
18 | fireEvent.mouseLeave(element)
19 | })
20 | expect(result.current).toBe(false)
21 | })
22 |
23 | it('responds to enter delay', () => {
24 | jest.useFakeTimers()
25 | const element = document.createElement('div')
26 | const {result} = renderHook(() => useHover(element, {enterDelay: 1000}))
27 |
28 | expect(result.current).toBe(false)
29 |
30 | act(() => {
31 | fireEvent.mouseEnter(element)
32 | })
33 | expect(result.current).toBe(false)
34 |
35 | act(() => {
36 | jest.runAllTimers()
37 | })
38 |
39 | expect(result.current).toBe(true)
40 |
41 | act(() => {
42 | fireEvent.mouseLeave(element)
43 | })
44 | expect(result.current).toBe(false)
45 | })
46 |
47 | it('responds to leave delay', () => {
48 | jest.useFakeTimers()
49 | const element = document.createElement('div')
50 |
51 | const {result} = renderHook(() =>
52 | useHover(element, {enterDelay: 0, leaveDelay: 1000})
53 | )
54 |
55 | expect(result.current).toBe(false)
56 |
57 | act(() => {
58 | fireEvent.mouseEnter(element)
59 | })
60 | expect(result.current).toBe(true)
61 |
62 | act(() => {
63 | fireEvent.mouseLeave(element)
64 | })
65 | expect(result.current).toBe(true)
66 |
67 | act(() => {
68 | jest.runAllTimers()
69 | })
70 |
71 | expect(result.current).toBe(false)
72 | })
73 |
--------------------------------------------------------------------------------
/packages/server-promises/src/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | export const ServerPromisesContext = React.createContext(createPromisesCache())
3 | export const useServerPromises = () => React.useContext(ServerPromisesContext)
4 |
5 | // renders the app until there are no promises that get pushed to the cache array
6 | export function loadPromisesworld
55 | 2 |
3 |
7 |
8 | 4 | usePassiveLayoutEffect() 5 |
6 |
9 |
10 | 
npm i @react-hook/passive-layout-effect27 |
28 | 29 | A React hook that uses `useEffect()` on the server and `useLayoutEffect()` in the browser 30 | 31 | ## Quick Start 32 | 33 | ```jsx harmony 34 | import useLayoutEffect from '@react-hook/passive-layout-effect' 35 | 36 | const Component = ({foo, bar}) => { 37 | // Used the same way useEffect() and useLayoutEffect() are 38 | useLayoutEffect(() => {}, [foo, bar]) 39 | } 40 | ``` 41 | 42 | ## Full credit to 43 | 44 | [Dan Abramov](https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85) 45 | 46 | ## LICENSE 47 | 48 | MIT 49 | -------------------------------------------------------------------------------- /packages/throttle/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import useLatest from '@react-hook/latest' 3 | 4 | const perf = typeof performance !== 'undefined' ? performance : Date 5 | const now = () => perf.now() 6 | 7 | export function useThrottleCallback
2 |
3 |
7 |
8 | 4 | useCopy() 5 |
6 |
9 |
10 | 
npm i @react-hook/copy27 |
28 | 29 | A React hook for copying text to the clipboard 30 | 31 | ## Quick Start 32 | 33 | ```jsx harmony 34 | import useCopy from '@react-hook/copy' 35 | 36 | const Component = (props) => { 37 | const {copied, copy, reset} = useCopy( 38 | 'This text will be copied to the clipboard' 39 | ) 40 | 41 | return {copied === false ? 'Copy' : 'Copied'} 42 | } 43 | ``` 44 | 45 | ## API 46 | 47 | ### useCopy(text: string) 48 | 49 | | Argument | Type | Required? | Description | 50 | | -------- | -------- | --------- | ----------------------------------------------------------------- | 51 | | text | `string` | Yes | The text you want to copy to the clipboard when `copy` is clicked | 52 | 53 | ### Returns `{copied: boolean, copy: () => void, reset: () => void}` 54 | 55 | ## LICENSE 56 | 57 | MIT 58 | -------------------------------------------------------------------------------- /packages/switch/src/index.test.tsx: -------------------------------------------------------------------------------- 1 | import {renderHook, act} from '@testing-library/react-hooks' 2 | import useSwitch from './index' 3 | 4 | describe('useSwitch()', () => { 5 | it('should turn on', () => { 6 | const {result} = renderHook(() => useSwitch()) 7 | expect(result.current[0]).toBe(false) 8 | act(result.current[1].on) 9 | expect(result.current[0]).toBe(true) 10 | }) 11 | 12 | it('should turn off', () => { 13 | const {result} = renderHook(() => useSwitch(true)) 14 | expect(result.current[0]).toBe(true) 15 | act(result.current[1].off) 16 | expect(result.current[0]).toBe(false) 17 | }) 18 | 19 | it('should toggle', () => { 20 | const {result} = renderHook(() => useSwitch(false)) 21 | expect(result.current[0]).toBe(false) 22 | act(result.current[1]) 23 | expect(result.current[0]).toBe(true) 24 | act(result.current[1]) 25 | expect(result.current[0]).toBe(false) 26 | }) 27 | 28 | it('should be controlled', () => { 29 | let value = true 30 | const handleChange = (nextValue: boolean) => { 31 | value = nextValue 32 | } 33 | 34 | const {result, rerender} = renderHook( 35 | ({value}) => useSwitch(false, value, handleChange), 36 | {initialProps: {value}} 37 | ) 38 | 39 | expect(result.current[0]).toBe(true) 40 | act(result.current[1]) 41 | expect(result.current[0]).toBe(true) 42 | rerender({value}) 43 | expect(result.current[0]).toBe(false) 44 | }) 45 | 46 | it('should be controlled externally', () => { 47 | const handleChange = jest.fn() 48 | const {result, rerender} = renderHook( 49 | ({value}) => useSwitch(false, value, handleChange), 50 | {initialProps: {value: true}} 51 | ) 52 | 53 | rerender({value: false}) 54 | expect(result.current[0]).toBe(false) 55 | rerender({value: true}) 56 | expect(result.current[0]).toBe(true) 57 | expect(handleChange).not.toBeCalled() 58 | rerender({value: false}) 59 | expect(result.current[0]).toBe(false) 60 | rerender({value: false}) 61 | act(result.current[1]) 62 | expect(result.current[0]).toBe(false) 63 | expect(handleChange).toBeCalledWith(true) 64 | }) 65 | }) 66 | -------------------------------------------------------------------------------- /packages/merged-ref/README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 |
7 |
8 | 4 | useMergedRef() 5 |
6 |
9 |
10 | 
npm i @react-hook/merged-ref27 |
28 | 29 | A React hook for merging multiple refs into one ref 30 | 31 | ## Quick Start 32 | 33 | ```jsx harmony 34 | import React from 'react' 35 | import useMergedRef from '@react-hook/merged-ref' 36 | 37 | const Component = React.forwardRef((props, ref) => { 38 | const otherRef = React.useRef(null) 39 | const multiRef = useMergedRef(ref, otherRef) 40 | return 41 | }) 42 | ``` 43 | 44 | ## API 45 | 46 | ### `useMergedRef(...refs)` 47 | 48 | ```ts 49 | function useMergedRef
2 |
3 |
7 |
8 | 4 | useChange() 5 |
6 |
9 |
10 | 
npm i @react-hook/change27 |
28 | 29 | A React hook that invokes a callback anytime a value changes 30 | 31 | ## Quick Start 32 | 33 | ```jsx harmony 34 | import useChange from '@react-hook/change' 35 | 36 | const useChangeLog = (value) => { 37 | // Logs the value each time it changes 38 | useChange(value, console.log) 39 | } 40 | ``` 41 | 42 | ## API 43 | 44 | ### useChange(value, onChange) 45 | 46 | ```ts 47 | const useChange =
13 | {foo}
14 |
15 | )
16 | }
17 |
18 | const {unmount} = render({foo}
31 | }
32 |
33 | const {unmount} = render({foo}
45 | }
46 |
47 | const {unmount} = render(
63 | {foo}
64 |
65 | )
66 | }
67 |
68 | const {unmount} = render(2 |
3 |
10 | 4 | useLatest() 5 |
6 |
7 | 
8 |
9 |
8 | 11 | 12 |
13 |
14 | 
npm i @react-hook/latest31 | 32 | A React hook that updates useRef().current with the most recent value each invocation 33 | 34 | ## Quick Start 35 | 36 | ```jsx harmony 37 | import useLatest from '@react-hook/latest' 38 | 39 | const useEvent = (element, name, listener) => { 40 | const latest = useLatest(listener) 41 | 42 | React.useEffect(() => { 43 | const listen = (e) => latest.current(e) 44 | element.addEventListener(name, listen) 45 | return () => element.removeEventListener(name, listen) 46 | }, [name]) 47 | } 48 | ``` 49 | 50 | ## API 51 | 52 | ### useLatest(value) 53 | 54 | ```ts 55 | const useLatest:
2 |
3 |
7 |
8 | 4 | useToggle() 5 |
6 |
9 |
10 | 
npm i @react-hook/toggle27 |
28 | 29 | A React hook for toggling between two values 30 | 31 | ## Quick Start 32 | 33 | ```jsx harmony 34 | import useToggle from '@react-hook/toggle' 35 | 36 | const Component = (props) => { 37 | const [value, toggle] = useToggle(false, true) 38 | 39 | return ( 40 | 43 | ) 44 | } 45 | ``` 46 | 47 | ## API 48 | 49 | ### useToggle(off?, on?, defaultValue?) 50 | 51 | ```ts 52 | function useToggle
2 |
3 |
7 |
8 | 4 | usePrevious() 5 |
6 |
9 |
10 | 
npm i @react-hook/previous27 |
28 | 29 | A React hook that stores a value from the previous render. 30 | 31 | ## Quick Start 32 | 33 | ```jsx harmony 34 | import * as React from 'react' 35 | import usePrevious from '@react-hook/previous' 36 | 37 | const useChanged = (onChange) => { 38 | const [status, setStatus] = React.useState('off') 39 | const prevStatus = usePrevious(status) 40 | 41 | React.useEffect(() => { 42 | if (status !== prevStatus) onChange() 43 | }, [status]) 44 | 45 | return [status, setStatus] 46 | } 47 | ``` 48 | 49 | ## API 50 | 51 | ### usePrevious() 52 | 53 | ```ts 54 | const usePrevious:
2 |
3 |
7 |
8 | 4 | useWindowScroll() 5 |
6 |
9 |
10 | 
npm i @react-hook/window-scroll27 |
28 | 29 | A React hook for updating components when the scroll position of the window on the y-axis changes. 30 | This hook throttles updates to the scroll position using [useThrottle()](https://github.com/jaredLunde/react-hook/tree/master/packages/throttle) 31 | at `30fps` by default, but this rate is configurable. 32 | 33 | ## Quick Start 34 | 35 | [Check out the example on **CodeSandbox**](https://codesandbox.io/s/react-hookwindow-size-and-react-hookwindow-scroll-examples-oqmer?file=/src/App.js) 36 | 37 | ```jsx harmony 38 | import { useWindowScroll } from '@react-hook/window-scroll' 39 | 40 | const Component = (props) => { 41 | const scrollY = useWindowScroll(60 /*fps*/) 42 | return
scroll pos: {scrollY}
43 | }
44 | ```
45 |
46 | ## API
47 |
48 | ### useWindowScroll(fps?: number): number
49 |
50 | A hook that performantly updates its scroll position at a constant frame rate.
51 |
52 | #### Arguments
53 |
54 | | | Type | Default | Description |
55 | | --- | -------- | ------- | ----------------------------------------------------------------------------- |
56 | | fps | `number` | `30` | Defines the rate in frames per second at which the scroll position is updated |
57 |
58 | #### Returns `scrollY: number`
59 |
60 | | | Type | Description |
61 | | ------- | -------- | ------------------------------------------------------- |
62 | | scrollY | `number` | The current scroll position of the window on the y-axis |
63 |
64 | ## LICENSE
65 |
66 | MIT
67 |
--------------------------------------------------------------------------------
/packages/debounce/src/index.test.tsx:
--------------------------------------------------------------------------------
1 | import {renderHook, act} from '@testing-library/react-hooks'
2 | import {useDebounce, useDebounceCallback} from './index'
3 |
4 | const renderDebounce = (callback, ...args) =>
5 | renderHook(() => useDebounce(callback, ...args))
6 | const renderDebounceCallback = (fn, ...args) =>
7 | renderHook(() => useDebounceCallback(fn, ...args))
8 |
9 | describe('useDebounce()', () => {
10 | jest.useFakeTimers()
11 |
12 | it('should wait 100ms before invoking the callback', () => {
13 | const cb = jest.fn()
14 | const {result} = renderDebounceCallback(cb)
15 |
16 | act(result.current)
17 | act(result.current)
18 | act(result.current)
19 |
20 | act(() => jest.advanceTimersByTime(50))
21 | expect(cb).toBeCalledTimes(0)
22 | act(() => jest.advanceTimersByTime(100))
23 | expect(cb).toBeCalledTimes(1)
24 |
25 | act(result.current)
26 | act(result.current)
27 | act(result.current)
28 |
29 | act(() => jest.advanceTimersByTime(99))
30 | expect(cb).toHaveBeenCalledTimes(1)
31 | act(() => jest.advanceTimersByTime(1))
32 | expect(cb).toHaveBeenCalledTimes(2)
33 | })
34 |
35 | it('should invoke the callback on the leading edge', () => {
36 | const cb = jest.fn()
37 | const {result} = renderDebounceCallback(cb, 100, true)
38 |
39 | act(result.current)
40 | expect(cb).toHaveBeenCalledTimes(1)
41 |
42 | act(result.current)
43 | act(result.current)
44 | act(result.current)
45 | expect(cb).toHaveBeenCalledTimes(1)
46 |
47 | act(() => jest.advanceTimersByTime(100))
48 | expect(cb).toHaveBeenCalledTimes(2)
49 |
50 | act(result.current)
51 | expect(cb).toHaveBeenCalledTimes(3)
52 |
53 | act(result.current)
54 | act(result.current)
55 | act(result.current)
56 |
57 | expect(cb).toHaveBeenCalledTimes(3)
58 | act(() => jest.advanceTimersByTime(100))
59 | expect(cb).toHaveBeenCalledTimes(4)
60 | })
61 |
62 | it('should set the last value the callback was invoked with after 100ms', () => {
63 | const {result} = renderDebounce(1, 100)
64 |
65 | act(() => result.current[1](2))
66 | expect(result.current[0]).toBe(1)
67 |
68 | act(() => result.current[1](3))
69 | act(() => jest.advanceTimersByTime(50))
70 |
71 | act(() => result.current[1](4))
72 | act(() => jest.advanceTimersByTime(50))
73 | expect(result.current[0]).toBe(1)
74 |
75 | act(() => jest.advanceTimersByTime(50))
76 | expect(result.current[0]).toBe(4)
77 | })
78 |
79 | test('it should set the value on the leading edge', () => {
80 | const {result} = renderDebounce(1, 100, true)
81 |
82 | act(() => result.current[1](2))
83 | expect(result.current[0]).toBe(2)
84 |
85 | act(() => result.current[1](3))
86 | act(() => result.current[1](4))
87 |
88 | act(() => jest.advanceTimersByTime(50))
89 | expect(result.current[0]).toBe(2)
90 |
91 | act(() => jest.advanceTimersByTime(50))
92 | expect(result.current[0]).toBe(4)
93 | })
94 | })
95 |
--------------------------------------------------------------------------------
/packages/google-optimize/src/index.tsx:
--------------------------------------------------------------------------------
1 | import {useEffect, useState} from 'react'
2 |
3 | // Usage:
4 | // const Page = useGoogleOptimize('hhWP8gOsTvvT2P_KlFjw', [PageA, PageB])
5 | // return {JSON.stringify(variant)}
20 | }
21 |
22 | expect(render(3
')
23 | })
24 |
25 | it('should timeout and default to "1"', () => {
26 | // @ts-ignore
27 | window.gtag = () => {
28 | return
29 | }
30 |
31 | const Optimize = () => {
32 | const variant = useGoogleOptimize('abc', [1, 2, 3], 3)
33 | return {JSON.stringify(variant)}
34 | }
35 |
36 | const {asFragment} = render(null
')
39 | act(() => jest.advanceTimersByTime(3000))
40 | expect(asFragment()).toMatchSnapshot('1
')
41 | })
42 |
43 | it('should clear timeout', () => {
44 | // @ts-ignore
45 | window.gtag = (command, eventName, eventParams) => {
46 | if (eventParams.remove) return
47 | eventParams.callback(2)
48 | }
49 |
50 | const Optimize = () => {
51 | const variant = useGoogleOptimize('abc', [1, 2, 3], 1)
52 | return {JSON.stringify(variant)}
53 | }
54 |
55 | render({JSON.stringify(variant)}
69 | }
70 |
71 | const rendered = render({JSON.stringify(variant)}
86 | }
87 |
88 | render({JSON.stringify(variant)}
103 | }
104 |
105 | render(2 |
3 |
7 |
8 | 4 | useHover() 5 |
6 |
9 |
10 | 
npm i @react-hook/hover27 |
28 | 29 | A React hook for tracking the hover state of DOM elements in browsers 30 | where hovering is possible. If the browser does not support hover states 31 | (e.g. a phone) the `isHovering` value will always be `false`. 32 | 33 | ## Quick Start 34 | 35 | [Check out the example on **CodeSandbox**](https://codesandbox.io/s/react-hookhover-example-oohtc) 36 | 37 | ```jsx harmony 38 | import * as React from 'react' 39 | import useHover from '@react-hook/hover' 40 | 41 | const Component = (props) => { 42 | const target = React.useRef(null) 43 | const isHovering = useHover(target, {enterDelay: 200, leaveDelay: 200}) 44 | return
{isHovering ? 'Hovering' : 'Not hovering'}
45 | }
46 | ```
47 |
48 | ## API
49 |
50 | ### useHover(target, options?)
51 |
52 | ```tsx
53 | function useHoverReact.RefObject | T | null | Yes | A React ref created by `useRef()` or an HTML element |
64 | | options | [`UseHoverOptions`](#usehoveroptions) | Yes | Configuration options for the hook. See [`UseHoverOptions`](#usehoveroptions) below. |
65 |
66 | #### Returns `boolean`
67 |
68 | This hook returns `true` if the element in `ref` is in a hover state, otherwise `false`. This value
69 | is always `false` on devices that don't have hover states, i.e. phones.
70 |
71 | #### UseHoverOptions
72 |
73 | | Property | Type | Description |
74 | | ---------- | ------ | -------------------------------------------------------------- |
75 | | enterDelay | number | Delays setting `isHovering` to `true` for this amount in `ms` |
76 | | leaveDelay | number | Delays setting `isHovering` to `false` for this amount in `ms` |
77 |
78 | ## LICENSE
79 |
80 | MIT
81 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at jared.lunde@gmail.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 |
73 | [homepage]: https://www.contributor-covenant.org
74 |
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 |
--------------------------------------------------------------------------------
/packages/size/README.md:
--------------------------------------------------------------------------------
1 | 2 |
3 |
7 |
8 | 4 | useSize() 5 |
6 |
9 |
10 | 
npm i @react-hook/size27 |
28 | 29 | A React hook for measuring the size of HTML elements including when they change 30 | 31 | ## Features 32 | 33 | - [x] Determines the size of the element including any padding, borders, and scroll bars. 34 | - [x] The size reported by the hook updates each time the size of the element changes. 35 | - [x] Uses a single `ResizeObserver` for tracking all elements used by the hooks. 36 | [This approach is astoundingly more performant](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ) 37 | than using a `ResizeObserver` per element which most hook implementations do. 38 | - [x] Uses [`@juggle/resize-observer`](https://github.com/juggle/resize-observer) as a ponyfill when `ResizeObserver` isn't supported 39 | by the current browser. 40 | - [x] Automatically unobserves the target element when the hook unmounts. 41 | 42 | ## Quick Start 43 | 44 | [Check out an example on **CodeSandbox**](https://codesandbox.io/s/react-hooksize-example-vbpnl) 45 | 46 | ```jsx harmony 47 | import * as React from 'react' 48 | import useSize from '@react-hook/size' 49 | 50 | const Component = () => { 51 | const target = React.useRef(null) 52 | const [width, height] = useSize(target) 53 | 54 | return ( 55 |
56 |
59 | )
60 | }
61 | ```
62 |
63 | ## API
64 |
65 | ### useSize(target, options?)
66 |
67 | | Argument | Type | Required? | Description |
68 | | -------- | ---------------------------------------------------- | --------- | --------------------------------------------------------- |
69 | | target | Width: {width}
57 | Height: {height}
58 | React.RefObject | T | null | Yes | A React ref created by `useRef()` or an HTML element |
70 | | options | [`UseSizeOptions`](#usesizeoptions) | No | Options for SSR. See [`UseSizeOptions`](#usesizeoptions). |
71 |
72 | ### UseSizeOptions
73 |
74 | ```ts
75 | export interface UseSizeOptions {
76 | // The initial width to set into state.
77 | // This is useful for SSR environments.
78 | initialWidth: 0
79 | // The initial height to set into state.
80 | // This is useful for SSR environments.
81 | initialHeight: 0
82 | }
83 | ```
84 |
85 | ## LICENSE
86 |
87 | MIT
88 |
--------------------------------------------------------------------------------
/packages/hotkey/types/index.d.ts:
--------------------------------------------------------------------------------
1 | ///