-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into useSlider
- Loading branch information
Showing
16 changed files
with
301 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
# Contributing | ||
|
||
Thanks for being willing to contribute 🙌 If you contribute to this project, you agree to release your work under the license of this project. | ||
|
||
**Working on your first Pull Request?** You can learn how from this [First Contributions](https://github.com/firstcontributions/first-contributions) guide. | ||
|
||
## Project setup | ||
|
||
1. Fork and clone the repo | ||
1. Run `yarn install` to install dependencies | ||
1. Create a branch for your PR with `git checkout -b pr/your-branch-name` | ||
|
||
> Tip: Keep your `master` branch pointing at the original repository and make | ||
> pull requests from branches on your fork. To do this, run: | ||
> | ||
> ```sh | ||
> git remote add upstream https://github.com/streamich/react-use.git | ||
> git fetch upstream | ||
> git branch --set-upstream-to=upstream/master master | ||
> ``` | ||
> | ||
> This will add the original repository as a "remote" called "upstream," Then | ||
> fetch the git information from that remote, then set your local `master` | ||
> branch to use the upstream master branch whenever you run `git pull`. Then you | ||
> can make all of your pull request branches based on this `master` branch. | ||
> Whenever you want to update your version of `master`, do a regular `git pull`. | ||
## Development | ||
|
||
This library is a collection of React hooks so a proposal for a new hook will need to utilize the [React Hooks API](https://reactjs.org/docs/hooks-reference.html) internally to be taken into consideration. | ||
|
||
### Creating a new hook | ||
|
||
1. Create `src/useYourHookName.ts` and `src/__stories__/useYourHookName.story.tsx`, run `yarn start` to start the storybook development server and start coding your hook | ||
1. Create `src/__tests__/useYourHookName.test.ts`, run `yarn test:watch` to start the test runner in watch mode and start writing tests for your hook | ||
1. Create `src/docs/useYourHookName.md` and create documentation for your hook | ||
1. Export your hook from `src/index.ts` and add your hook to `README.md` | ||
|
||
You can also write your tests first if you prefer [test-driven development](https://en.wikipedia.org/wiki/Test-driven_development). | ||
|
||
### Updating an existing hook | ||
|
||
1. Run `yarn start` to start the storybook development server and start applying changes | ||
2. Update tests according to your changes using `yarn test:watch` | ||
3. Update documentation according to your changes | ||
|
||
## Committing and Pushing changes | ||
|
||
### Commit messages | ||
|
||
This repo uses [semantic-release](https://github.com/semantic-release/semantic-release) and [conventional commit messages](https://conventionalcommits.org) so prefix your commits with `fix:` or `feat:` if you want your changes to appear in [release notes](https://github.com/streamich/react-use/blob/master/CHANGELOG.md). | ||
|
||
### Git hooks | ||
|
||
There are git hooks set up with this project that are automatically enabled | ||
when you install dependencies. These hooks automatically test and validate your code when creating commits. They're really handy but can be temporarily disabled by adding a `--no-verify` flag to your commit command. This is useful when you want to commit and push to get feedback on uncompleted code. | ||
|
||
## Help needed | ||
|
||
Please have a look at the [open issues](https://github.com/streamich/react-use/issues) and respond to questions, bug reports and feature requests. Thanks! | ||
|
||
We're also looking to improve the code coverage on this project. To easily know what hooks need tests run `yarn test:coverage` to generate a code coverage report. You can see the report in your terminal or open `coverage/lcov-report/index.html` to see the HTML report. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
# `useRafState` | ||
|
||
React state hook that only updates state in the callback of [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). | ||
|
||
## Usage | ||
|
||
```jsx | ||
import {useRafState, useMount} from 'react-use'; | ||
|
||
const Demo = () => { | ||
const [state, setState] = useRafState({ | ||
width: 0, | ||
height: 0, | ||
}); | ||
|
||
useMount(() => { | ||
const onResize = () => { | ||
setState({ | ||
width: window.clientWidth, | ||
height: window.height, | ||
}); | ||
}; | ||
|
||
window.addEventListener('resize', onResize); | ||
|
||
return () => { | ||
window.removeEventListener('resize', onResize); | ||
}; | ||
}); | ||
|
||
return <pre>{JSON.stringify(state, null, 2)}</pre>; | ||
}; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { storiesOf } from '@storybook/react'; | ||
import * as React from 'react'; | ||
import { useRafState, useMount } from '..'; | ||
import ShowDocs from './util/ShowDocs'; | ||
|
||
const Demo = () => { | ||
const [state, setState] = useRafState({ x: 0, y: 0 }); | ||
|
||
useMount(() => { | ||
const onMouseMove = (event: MouseEvent) => { | ||
setState({ x: event.clientX, y: event.clientY }); | ||
}; | ||
const onTouchMove = (event: TouchEvent) => { | ||
setState({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY }); | ||
}; | ||
|
||
document.addEventListener('mousemove', onMouseMove); | ||
document.addEventListener('touchmove', onTouchMove); | ||
|
||
return () => { | ||
document.removeEventListener('mousemove', onMouseMove); | ||
document.removeEventListener('touchmove', onTouchMove); | ||
}; | ||
}); | ||
|
||
return <pre>{JSON.stringify(state, null, 2)}</pre>; | ||
}; | ||
|
||
storiesOf('State|useRafState', module) | ||
.add('Docs', () => <ShowDocs md={require('../../docs/useRafState.md')} />) | ||
.add('Demo', () => <Demo />); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
import { act, renderHook } from '@testing-library/react-hooks'; | ||
import { replaceRaf } from 'raf-stub'; | ||
import useRafState from '../useRafState'; | ||
|
||
interface RequestAnimationFrame { | ||
reset(): void; | ||
step(): void; | ||
} | ||
|
||
declare var requestAnimationFrame: RequestAnimationFrame; | ||
|
||
replaceRaf(); | ||
|
||
beforeEach(() => { | ||
requestAnimationFrame.reset(); | ||
}); | ||
|
||
afterEach(() => { | ||
requestAnimationFrame.reset(); | ||
}); | ||
|
||
describe('useRafState', () => { | ||
it('should be defined', () => { | ||
expect(useRafState).toBeDefined(); | ||
}); | ||
|
||
it('should only update state after requestAnimationFrame when providing an object', () => { | ||
const { result } = renderHook(() => useRafState(0)); | ||
|
||
act(() => { | ||
result.current[1](1); | ||
}); | ||
expect(result.current[0]).toBe(0); | ||
|
||
act(() => { | ||
requestAnimationFrame.step(); | ||
}); | ||
expect(result.current[0]).toBe(1); | ||
|
||
act(() => { | ||
result.current[1](2); | ||
requestAnimationFrame.step(); | ||
}); | ||
expect(result.current[0]).toBe(2); | ||
|
||
act(() => { | ||
result.current[1](prevState => prevState * 2); | ||
requestAnimationFrame.step(); | ||
}); | ||
expect(result.current[0]).toBe(4); | ||
}); | ||
|
||
it('should only update state after requestAnimationFrame when providing a function', () => { | ||
const { result } = renderHook(() => useRafState(0)); | ||
|
||
act(() => { | ||
result.current[1](prevState => prevState + 1); | ||
}); | ||
expect(result.current[0]).toBe(0); | ||
|
||
act(() => { | ||
requestAnimationFrame.step(); | ||
}); | ||
expect(result.current[0]).toBe(1); | ||
|
||
act(() => { | ||
result.current[1](prevState => prevState * 3); | ||
requestAnimationFrame.step(); | ||
}); | ||
expect(result.current[0]).toBe(3); | ||
}); | ||
|
||
it('should cancel update state on unmount', () => { | ||
const { unmount } = renderHook(() => useRafState(0)); | ||
const spyRafCancel = jest.spyOn(global, 'cancelAnimationFrame' as any); | ||
|
||
expect(spyRafCancel).not.toHaveBeenCalled(); | ||
|
||
unmount(); | ||
|
||
expect(spyRafCancel).toHaveBeenCalledTimes(1); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { useRef, useState, useCallback, Dispatch, SetStateAction } from 'react'; | ||
|
||
import useUnmount from './useUnmount'; | ||
|
||
const useRafState = <S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] => { | ||
const frame = useRef(0); | ||
const [state, setState] = useState(initialState); | ||
|
||
const setRafState = useCallback((value: S | ((prevState: S) => S)) => { | ||
cancelAnimationFrame(frame.current); | ||
|
||
frame.current = requestAnimationFrame(() => { | ||
setState(value); | ||
}); | ||
}, []); | ||
|
||
useUnmount(() => { | ||
cancelAnimationFrame(frame.current); | ||
}); | ||
|
||
return [state, setRafState]; | ||
}; | ||
|
||
export default useRafState; |
Oops, something went wrong.