Introduction

The Tackle Box holds the hooks, you do the math

Setup

$ npm i @fomolol/tacklebox

or use whatever package manager you like the most

Features

The toolkit is composed of the following hooks:

useCanvas – for when you want to use canvas

useClipboard – copies things to the clipboard (so the user can paste with haste)

useCookieBanner – tackles some cookie banner related saving to local storage

useCustomConsole – you can now make the console (via inspector) say what you want

useCursorStyle – this can be used with the @fomolol/dope CursorContext and Cusor components.

useDebug – returns true if #debug is present in the url

useId – more coming soon

useForkRef – this is used in the CanvasEraser component in @fomolol/dope.

useInterval – create and dispose intervals

useDocumentReadyState – more coming soon

useEventBus – more coming soon

useFocus – focus state

useGiphy – now you can add giphys anywhere. NOTE: You need to sign up for the api and add the env var GIPHY_API_KEY to your env vars. See https://developers.giphy.com/ and https://www.npmjs.com/package/giphy-api for more.

useIsTouchDevice – duh

useIsVisible – duh

useHorizontalScroll – duh

useHoverImage – now you can make those sexy hover images like a pro.

useIsomophicLayoutEffect – runs react's useLayoutEffect if in browser, if not, runs a plain useEffect instead

useIntersectionObserver – spring-based intersection action

useIntersectionObserver – spring-based intersection action

useMatterJS – if you decide you want to use Matter.js in React

useMediaQuery – css-like media query support in Javascript.

useMousePosition – handles collecting the mouse position

useMouseDirection – handles finding the direction the mouse moved

useHashScroll – when using smooth scrolling, the hash in the url can cause issues. Load this up to solve those.

useParallax – cool parallax movement

usePopup – Window popups are a pain in the arse in React, so this hook makes them easier to deal with.

usePaperJS – if you decide you want to use Paper.js in React

useRect – shorthand version of getboundingclientrect

useSmoothTransform – shorthand to make a transform that uses spring dynamics

useSlots – brings vue slots to react

useSticky – sticky elements based on a class name

useStickyHeader – making those sticky headers easier to manage

useTheme – this helps when you have a dark/light mode responsive site

useTimeout – timeout helper

useWindowSize – window sizing updated in sync with @react-spring/rafz

If you don't find what you're looking for, it's likely part of the react-use collection.

Some of our favorites from this collection include:

• useSpeech
• useIdle
• useBattery
• useDeepCompareEffect
• useEffectOnce
• useLongPress
• usePageLeave
• usePinchZoom
• useQueue
• useScratch
• useSearchParam
• useStartTyping
• useToggle
• useTitle

Definitely check the collection out at http://streamich.github.io/react-use

Another worthy collection of fine hooks is located at: https://github.com/jaredLunde/react-hook. Some highlights include:

• useCache
• useDebounce
• useGoogleOptimize

Authors

This set of hooks is curated and maintained by the FOMOLOL Classified team:

• Scott Shin (@shinmc_) – FOMOLOL
• Rob Sawyer (@robksawyer_) – FOMOLOL

This project template and some of the hooks were borrowed from the amazing work of Studio Freight:

• Clement Roche (@clementroche_) – Studio Freight
• Guido Fier (@uido15) – Studio Freight
• Leandro Soengas (@lsoengas) - Studio Freight
• Franco Arza (@arzafran) - Studio Freight

License

The MIT License.