Skip to content

Commit

Permalink
Merge pull request #13 from Upstatement/fix/hook-jsdoc
Browse files Browse the repository at this point in the history
Finishes up JSDoc
  • Loading branch information
joshpensky authored Apr 17, 2020
2 parents 20b0fb8 + 7014f18 commit 1ccb030
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 0 deletions.
17 changes: 17 additions & 0 deletions src/useForceUpdate.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
import { useDebugValue } from 'react';
import useState from './useState';

/**
* Custom React utility hook that provides a way to force the a component to update. It's
* recommended to _only be used_ when the DOM is dependent on a ref value.
*
* @example
* ```js
* const update = useForceUpdate();
* const ref = useRef(1);
*
* const increase = () => {
* ref.current += 1;
* update();
* };
* ```
*
* @returns an update function that, when called, will force the component to update
*/
const useForceUpdate = () => {
const [tick, setTick] = useState(-1);
const update = () => setTick(tick => tick + 1);
Expand Down
14 changes: 14 additions & 0 deletions src/useMap.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
import { useDebugValue, useRef } from 'react';
import useForceUpdate from './useForceUpdate';

/**
* Custom React hook for using an ES6 Map as a state variable inside your React component.
*
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
*
* @example
* ```js
* const map = useMap([['foo', 'bar'], ['baz', 'qux']]);
* const fooValue = map.get('foo');
* ```
*
* @param entries the initial value of the Map
* @returns the current Map state variable
*/
const useMap = <T, U>(entries?: [T, U][]) => {
const update = useForceUpdate();
const mapRef = useRef(new Map<T, U>(entries));
Expand Down
14 changes: 14 additions & 0 deletions src/useSet.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
import { useDebugValue, useRef } from 'react';
import useForceUpdate from './useForceUpdate';

/**
* Custom React hook for using an ES6 Set as a state variable inside your React component.
*
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
*
* @example
* ```js
* const set = useSet([1, 2, 3]);
* const hasOne = set.has(1);
* ```
*
* @param iterable the initial value of the Set
* @returns the current Set state variable
*/
const useSet = <T>(iterable?: Iterable<T>) => {
const update = useForceUpdate();
const setRef = useRef(new Set<T>(iterable));
Expand Down

0 comments on commit 1ccb030

Please sign in to comment.