webdevsimplified / useful-custom-react-hooks Goto Github PK

Add Language Select Box in Auth Pages

Hi Kyle. First of all thank you for this collection of awesome utitly hooks. You mentioned that you would be open to add TypeScript versions of your hooks in a seperate branch. I would love that and I would like to actually go one step further. How about making this TS branch a npm package and publish it so people can easily use these hooks in their projects. With you permission i would like to work on that.

When I try using useCoookie with typescript I get errors when it returns a null value for newValue.

Any idea what would be causing this?

Add hooks like -

• useHover
• useWindowDimension
• useClickOutside
• useClipboard
• useLongPress
• useScroll
• useCookie

Hopefully, you will add them :)

#supportNewbies

Similar to #2
Especially painful if you already use history var name
I think is better if returns as

  return [
    value,
    set,
    history: historyRef.current,
    pointer: pointerRef.current,
    back,
    forward,
    go
  ]

and then you can destructure as

const [count, setCount, countHistory, countPointer, countBack, countForward, countGo ] =
   useStateWithHistory(1)

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a use effect cleanup function.

In the "update" and "remove" functions, it should be "a.length" instead of "a.length-1", as with the "slice" function, the second index is not included in the result. The problem can even be seen in the result of the demo in the youtube video (after 9m55 in https://www.youtube.com/watch?v=0c6znExIqRw)

Similar to #2

In the useTimeout hook you actually don't need a dependency array at all. Callback Function will be unstable on every render and trigger the side effect, so there is no point of doing Object.is() checks if you know it will return false. This is the best use-case for useEffect without dependency array.

useEffect(() => {
    callbackRef.current = callback
});

unable to find useContext which can be a good lesson to learn for clean code

Maybe someone has already done this (and if so, could link in readme), but it'd be great if there was a typescript version of these hooks?

hooks which lets you access the camera stream

Only works if i do
return [ array, setArray, push, filter, update, remove, clear ]
and in code
const [array, setArray, push, filter, update, remove, clear] = useArray([])

Not sure why it doesn't work if returning by object, gives me undefined.

At the first line of the "go" function, there is a problem with the second index check: with the current code it is not possible to go to the last state. It should be for example "if (index < 0 || index > historyRef.current.length-1) return".

Similar to #2

If you've multiple times useAsync() you can't use destructuring assignment

I think these hooks could be useful as a simple npm package people could use easily in their projects. What do you think @WebDevSimplified? Just close this issue if you don't think it's a good idea, I don't mind.

The example components you've made for each hook could easily be used as test components for unit tests, and then all we need is some simple documentation. I would be glad to contribute.

specific hooks for handling nextjs evnets like routeChangeStart, routeChangeComplete etc

Categories Menu Error Handle