V6

.eslintrc.js

@@ -0,0 +1,76 @@
+const javascriptRules = {
+  // Core ESLint
+  'no-console': 'off',
+  'func-names': 'off',
+  'guard-for-in': 'off',
+  'prefer-const': 'off',
+  'no-return-assign': 'off',
+  'no-nested-ternary': 'off',
+  'no-underscore-dangle': 'off',
+  'no-prototype-builtins': 'off',
+  'no-useless-constructor': 'off',
+  'class-methods-use-this': 'off',
+
+  // React
+  'react/jsx-pascal-case': 'off',
+  'react/react-in-jsx-scope': 'off', // Not required with >= React 18
+  'react/require-default-props': 'off',
+  'react/jsx-no-useless-fragment': 'off',
+  'react/destructuring-assignment': 'off', // VSCode doesn't support automatically destructuring; it's a pain to add a new variable
+
+  // Imports
+  'import/no-extraneous-dependencies': 'off',
+  'unused-imports/no-unused-imports': 'error',
+  'unused-imports/no-unused-vars': 'off',
+};
+
+const typescriptRules = {
+  ...javascriptRules,
+  'no-shadow': 'off', // Breaks with enums :(
+  '@typescript-eslint/no-shadow': 'error',
+
+  'consistent-return': 'off', // TypeScript effectively obsoletes this rule
+  '@typescript-eslint/comma-dangle': 'off', // Avoid conflict between ESLint and Prettier
+  '@typescript-eslint/no-unused-vars': 'off', // Obsolete because 'unused-vars' plugin
+
+  // Turning off some TypeScript rules that are too strict & just noisy...
+  '@typescript-eslint/ban-types': 'off',
+  '@typescript-eslint/no-redeclare': 'off',
+  '@typescript-eslint/ban-ts-comment': 'off',
+  '@typescript-eslint/no-unsafe-call': 'off',
+  '@typescript-eslint/no-for-in-array': 'off',
+  '@typescript-eslint/no-unsafe-return': 'off',
+  '@typescript-eslint/no-empty-function': 'off',
+  '@typescript-eslint/no-unsafe-argument': 'off',
+  '@typescript-eslint/no-floating-promises': 'off',
+  '@typescript-eslint/no-unsafe-assignment': 'off',
+  '@typescript-eslint/no-unsafe-member-access': 'off',
+  '@typescript-eslint/restrict-template-expressions': 'off',
+};
+
+module.exports = {
+  // JavaScript configuration
+  plugins: ['unused-imports'],
+  extends: [
+    '@ikscodes/eslint-config/rules/airbnb',
+    '@ikscodes/eslint-config/rules/eslint',
+    '@ikscodes/eslint-config/rules/prettier',
+  ],
+  rules: javascriptRules,
+
+  overrides: [
+    // TypeScript configuration
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      plugins: ['@typescript-eslint', 'unused-imports'],
+      extends: [
+        '@ikscodes/eslint-config/rules/airbnb',
+        '@ikscodes/eslint-config/rules/typescript',
+        '@ikscodes/eslint-config/rules/eslint',
+        '@ikscodes/eslint-config/rules/prettier',
+      ],
+      parserOptions: { project: './tsconfig.json' },
+      rules: typescriptRules,
+    },
+  ],
+};

README.md

@@ -25,10 +25,10 @@ npm install usable-react
 - [`useClickOutside`](./docs/use-click-outside.md)
 - [`useClipboard`](./docs/use-clipboard.md)
 - [`useCompare`](./docs/use-compare.md)
+- [`useConst`](./docs/use-const.md)
 - [`useDebounced`](./docs/use-debounced.md)
 - [`useDebouncedEffect`](./docs/use-debounced-effect.md)
-- [`useDeferredChildren`](./docs/use-deferred-children.md)
-- [`useDomEvent`](./docs/use-dom-event.md)
+- [`useDomEventListeners`](./docs/use-dom-event-listeners.md)
 - [`useEffectAfterMount`](./docs/use-effect-after-mount.md)
 - [`useEffectOnce`](./docs/use-effect-once.md)
 - [`useEffectTrigger`](./docs/use-effect-trigger.md)
@@ -37,8 +37,13 @@ npm install usable-react
 - [`useHash`](./docs/use-hash.md)
 - [`useHashCompare`](./docs/use-hash-compare.md)
 - [`useInitialRender`](./docs/use-initial-render.md)
+- [`useIntersectionObserver`](./docs/use-intersection-observer.md)
 - [`useInterval`](./docs/use-interval.md)
 - [`useIsMounted`](./docs/use-is-mounted.md)
+- [`useIsomorphicLayoutEffect`](./docs/use-isomorphic-layout-effect.md)
+- [`useMeasurement`](./docs/use-measurement.md)
+- [`useMicrotaskEffect`](./docs/use-microtask-effect.md)
 - [`usePrevious`](./docs/use-previous.md)
+- [`useResizeObserver`](./docs/use-resize-observer.md)
 - [`useTimer`](./docs/use-timer.md)
 

docs/use-async-effect.md

@@ -32,5 +32,5 @@ useAsyncEffect(() => {
       // ...
     },
   }
-});
+}, [/* effect dependencies */]);
 ```

docs/use-const.md

@@ -0,0 +1,17 @@
+# `useConst`
+
+Returns a constant value over the lifecycle of a component.
+
+## Example
+
+```tsx
+const [count, setCount] = useState(123);
+const initialState = useConst(state);
+
+useEffect(() => {
+  console.log(initialState);
+  // => 123 (always — even after invoking setCount)
+}, [count])
+
+<button onClick={() => setState((curr) => curr + 1))}>Click me to increment: {count}</button>
+```

docs/use-dom-event.md → docs/use-dom-event-listeners.md

@@ -5,7 +5,7 @@ Allows your React component to hook into native DOM events that exist outside th
 ## Examples
 
 ```tsx
-const addWindowEvent = useDomEvent(window);
+const addWindowEvent = useDomEventListeners(window);
 
 addWindowEvent('click', () => {
   console.log('window was clicked!');
@@ -14,7 +14,7 @@ addWindowEvent('click', () => {
 
 ```tsx
 const ref = useRef<HTMLDivElement>(null);
-const addRefEvent = useDomEvent(ref);
+const addRefEvent = useDomEventListeners(ref);
 
 addRefEvent('click', () => {
   console.log('ref was clicked!');

docs/use-intersection-observer.md

@@ -0,0 +1,21 @@
+# `useIntersectionObserver`
+
+Creates an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to measure when a given ref element enters the viewport.
+
+## Example
+
+```tsx
+const ref = useRef(null);
+
+useIntersectionObserver({
+  ref
+  threshold: [0, 1],
+  handleEntry: (entry) => {
+    if ((entry?.isIntersecting) {
+      // do something upon intersection!
+    }
+  },
+}, [/* effect dependencies */]);
+
+<div ref={ref}>Watch me with IntersectionObserver</div>
+```

docs/use-isomorphic-layout-effect.md

@@ -0,0 +1,11 @@
+# `useIsomorphicLayoutEffect`
+
+Same as React's `useLayoutEffect`, except that it will only attempt to run client-side (thus silencing React's warning against `useLayoutEffect` during server-side rendering).
+
+## Example
+
+```tsx
+useIsomorphicLayoutEffect({
+  // do something synchronous!
+}, [/* effect dependencies */]);
+```

docs/use-measurement.md

@@ -0,0 +1,32 @@
+# `useMeasurement`
+
+A set of hooks for gleaning arbitrary measurements from DOM elements.
+
+- `useMeasurement` allows the consumer to get any arbitrary measurement from the ref element.
+- `useElementHeight` and `useElementWidth` provide shortcuts to `offsetHeight` and `offsetWidth`, respectively.
+
+## Example
+
+```tsx
+const ref = useRef(null);
+
+const scrollHeight = useMeasurement({
+  ref,
+  getMeasurement: (element) => element.scrollHeight,
+  defaultValue: 0,
+});
+
+<div ref={ref}>Measure me!</div>
+```
+
+```tsx
+const ref = useRef(null);
+const divHeight = useElementHeight(ref);
+<div ref={ref}>I'm {divHeight} pixels tall!</div>
+```
+
+```tsx
+const ref = useRef(null);
+const divHeight = useElementWidth(ref);
+<div ref={ref}>I'm {divWidth} pixels wide!</div>
+```

docs/use-microtask-effect.md

@@ -0,0 +1,11 @@
+# `useMicrotaskEffect`
+
+Schedules an effect with [`queueMicrotask`](https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask).
+
+## Example
+
+```tsx
+useMicrotaskEffect(() => {
+  console.log('doot doot doot!')
+}, [/* effect dependencies */]);
+```

docs/use-resize-observer.md

@@ -0,0 +1,17 @@
+# `useResizeObserver`
+
+Creates a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to run an effect anytime the content of a given ref element's dimensions change.
+
+## Example
+
+```tsx
+const ref = useRef(null);
+
+useResizeObserver(
+  ref,
+  () => console.log('resized!'),
+  [/* effect dependencies */],
+);
+
+<div ref={ref}>Watch me with ResizeObserver</div>
+```