/custom-react-hooks

My personal use of custom react hooks.

Primary LanguageJavaScript

custom-react-hooks

Custom hooks in React.js that are handy in daily day to day code

Custom Hooks

  • useCounter - React Hook to handle counter, increment and decrement
  • useDialog - React Hook to handle open and close dialogs
  • useFetch - React Hook to call apis on load with Fetch
  • usePrevious - React Hook to use previos state and props
  • useToggle - React Hook to handle toggle button and lists
  • useInputField - React Hook to use state values for input fields
  • useUpdateEffect - React Hook to call snippet ONLY-ON-UPDATE
  • useCopyToClipBoard - When you want to pass a state value and provide a copy to ClipBoard option
  • useBase64Encode - React Hook to encode event String value to Base64 without storing text anywhere
  • useSecondsTimer - React Hook to use timer from n to 0 seconds
  • useTimer - React Hook to use timer from 0 to hh:mm:ss time runner until stopped.
  • useClickInside - When you want to call a function when clicked inside the element Ex: Modal PopUp
  • useClickOutside - When you want to call a function when clicked outside the element Ex: Modal PopUp
  • useHoverIn - When you want to call a function when hovered or mouse over inside the element Ex: hovering a menu or enabling shopping card zoom
  • useHoverOut - When you want to call a function when hovered or mouse out outside the element Ex: hovering out of a menu or disabling shopping card zoom
  • useHoverEvent - When you want to call a function when hovered or mouse out inside and outside the element Ex: hovering out of a menu or disabling shopping card zoom. useHoverEvent hook has both useHoverIn and useHoverOut events
  • usePagination - React Hook to handle numerical paginations