Package Exports

powerhooks
powerhooks/getScrollableParent
powerhooks/getScrollableParent.js
powerhooks/index.js
powerhooks/tools/StatefulObservable
powerhooks/tools/StatefulObservable/index.js
powerhooks/tools/StatefulObservable/statefulObservableToStatefulEvt
powerhooks/tools/StatefulObservable/statefulObservableToStatefulEvt.js
powerhooks/tools/updateSearchBar
powerhooks/tools/updateSearchBar.js
powerhooks/tools/urlSearchParams
powerhooks/tools/urlSearchParams.js
powerhooks/useBrowserFontSizeFactor
powerhooks/useBrowserFontSizeFactor.js
powerhooks/useCallbackFactory
powerhooks/useCallbackFactory.js
powerhooks/useClickAway
powerhooks/useClickAway.js
powerhooks/useConst
powerhooks/useConst.js
powerhooks/useConstCallback
powerhooks/useConstCallback.js
powerhooks/useDomRect
powerhooks/useDomRect.js
powerhooks/useEffectOnValueChange
powerhooks/useEffectOnValueChange.js
powerhooks/useGlobalState
powerhooks/useGlobalState.js
powerhooks/useGuaranteedMemo
powerhooks/useGuaranteedMemo.js
powerhooks/useMergeRefs
powerhooks/useMergeRefs.js
powerhooks/useNamedState
powerhooks/useNamedState.js
powerhooks/useStateRef
powerhooks/useStateRef.js
powerhooks/useWindowInnerSize
powerhooks/useWindowInnerSize.js
powerhooks/useWithProps
powerhooks/useWithProps.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (powerhooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A library of generic React hooks

This module is still under development. A real documentation website is coming.

Main hooks

`useConstCallback`

Believe it or not there is no valid reason to require user to pass in a dependency array to useCallback.

Demo playground to show you why it matters.

`useCallbackFactory`

To avoid re-rendering every list item component when the parent re-renders.

//Without powerhook:

todos.map(todo => <Todo todo={todo} onClick={(a, b) => onClick(todo, a, b)} />);

//With:

import { useCallbackFactory } from "powerhooks/useCallbackFactory";

//...

const onClickFactory = useCallbackFactory(([todo]: [string], [a, b]: [string, number]) =>
    onClick(todo, a, b)
);

todos.map(todo => <Todo todo={todo} onClick={onClickFactory(todo)} />);

Let's assume <TodoItem /> uses React.memo, in the example without powerhooks, every render of the parent the reference of onComplete changes.
useCallbackFactory on the other hand always returns the same function for a given todo: string.

`useGlobalState`

Create global state persistent across reloads that is accessible through out the entire app, and this without involving a provider.

NOTE: It makes uses of TypeScript's template literal types to return useIsDarkModeEnabled based on the name parameter ("isDarkModeEnabled").
How cool is that ?!

useIsDarkModeEnabled.ts

import { createUseGlobalState } from "powerhooks/useGlobalState";

export const { useIsDarkModeEnabled, evtIsDarkModeEnabled } = createUseGlobalState({
    name: "isDarkModeEnabled",
    initialState: window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches,
    doPersistAcrossReloads: true
});

MyComponent.tsx

import { useIsDarkModeEnabled } from "./useIsDarkModeEnabled";

export function MyComponent(){

  const { isDarkModeEnabled, setIsDarkModeEnabled }= useIsDarkModeEnabled();

  return (
    <div>
      <p>The dark mode is currently: {isDarkModeEnabled?"enabled":"disabled"}</p>
      <button onClick={()=> setIsDarkModeEnabled(!isDarkModeEnabled)}>
        Click to toggle dark mode
      <button>
    </dvi>
  );

}

Optionally, you can track your state an edit them outside of the react tree React but still trigger refresh when the state is changed.

import { evtIsDarkModeEnabled } from "./useIsDarkModeEnabled";

//After 4 seconds, enable dark mode, it will triggers re-renders of all the components
//that uses the state.
setTimeout(() => {
    evtIsDarkModeEnabled.state = true;
}, 4000);

//Print something in the console anytime the state changes:

evtIsDarkModeEnabled.attach(isDarkModeEnabled => {
    console.log(`idDarkModeEnabled changed, new value: ${isDarkModeEnabled}`);
});

For SSR (Next.js) use powerhook/useSsrGlobalState as showed in src/test/apps/ssr.

`useDomRect`

Measure rendered components in realtime.

import { useDomRect } from "powerhooks/useDomRect";

function MyComponent() {
    const { ref, domRect } = useDomRect();

    return (
        <>
            <div ref={ref}>
                This div is div size's dimensions <br />
                are determined by it's content
            </div>
            <div
                style={{
                    width: domRect.width,
                    height: domRect.height
                }}
            >
                This div is the same size as the first div
            </div>
        </>
    );
}

WARNING: Not yet compatible with SSR

Used by

Development

Start the test SPA

npx tsc -w
yarn start_spa