@fomolol/tacklebox


Introduction

The Tackle Box holds the hooks, you do the math

Setup

``bash
$ 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

Another worthy collection of fine hooks is located at: .
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.