@studio-lumio/hooks v0.1.37
Introduction
A compilation of react hooks we use to make our magic at Studio Lumio, heavily inspired by the SFDR's Hamo
π©The API may be subject to change without prior notice.
Setup
$ yarn add @studio-lumio/hooks
$ npm i @studio-lumio/hooks
Features
This toolkit is composed of:
useOnClickOutside
β trigger a callback when user clicks outside of a reference node.
useOnClickOutside(ref, () => console.log('clicked outside'))
useDebug
β returns true if #debug is present in the url.
const debug = useDebug()
useDocumentReadyState
β returns true if document is ready.
const ready = useDocumentReadyState()
useFrame
β use @studio-freight/tempus
animation frame.
useInterval
β create and dispose intervals.
useInterval(() => {
setCount(count + 1)
},
// Delay in milliseconds or null to stop it
1000,
)
useIsClient
β returns true if window is defined.
const isclient = useIsClient()
useIsTouchDevice
β returns true if client is using a touch-capable device.
const isTouch = useIsTouchDevice()
useIsVisible
β returns true if a reference node is in the viewport.
const { ref, inView } = useIsVisible({ threshold: 0.5, once: true, rootMargin: '0px', root: null })
useMediaQuery
β css-like media query support in Javascript.
const match = useMediaQuery('(min-width: 1024px)')
useRect
β getboundingclientrect
const { top, bottom } = useRect(elRef)
useSlots
β brings vue slots
to react
useFoucFix
β temporary fix for FOUC bug from Next js
useWindowSize
β returns window dimensions
const { width, height } = useWindowSize()
useIntersectionObserver
β detects visibility of a component on the viewport using the IntersectionObserver API
const entry = useIntersectionObserver(ref, {})
useIsomorphicLayoutEffect
β identical to useEffect, but fires synchronously after all DOM mutations.
useIsomorphicLayoutEffect(() => {
console.log(useIsomorphicLayoutEffect)
}, [])
useCopyToClipboard
β provides a copy method to save a string in the clipboard and the copied value
const [value, copy] = useCopyToClipboard()
const handleClick = () => {
copy('copy me', callback)
}
<button onClick={handleClick}>Meh</button>
useEventListener
β it does what the name says. Pass in an event and a callback function as the second parameter
const elRef = useRef<HTMLElement>(null)
const documentRef = useRef<Document>(document)
// for window based event
useEventListener('scroll', () => console.log('scroll'))
// for document based event
useEventListener('visibilitychange', () => console.log('visibilitychange'), documentRef)
// for element based event
useEventListener('click', () => console.log('clicked'), elRef)
useDebounce
β uses an internal timer to update the variable every x seconds (2nd parameter)
const [value, setValue] = useState<string>('')
const debouncedValue = useDebounce<string>(value, 500)
useDebounceFn
β uses an internal timer to execute the callback function every x seconds (2nd parameter)
const debouncedFn = useDebounceFn(() => {
console.log('This function is debounced!');
}, 500);
useEffectOnce
β useEffect
that's executed only one time, on mount.
useEffectOnce(() => {
console.log('Triggered only on mount')
})
useUpdateEffect
β useEffect
that ignores the first invocation (e.g. on mount)
useUpdateEffect(() => {
console.log('ignores on mount', data)
}, [data])
useIsMounted
β it returns a callback that returns true if the component is mounted
const isMounted = useIsMounted()
useFirstMountState
β it returns true if component is just mounted.
const isFirstMountState = useFirstMountState()
useLocalStorage
β it is used similarly to ths useState
hook. It takes in 2 parameters, the key and the initial value.
const [value, setValue, removeValue] = useLocalStorage('valueKey', [])
useSessionStorage
β pretty much the same as useLocalStorage
just for session storage
const [value, setValue] = useSessionStorage('valueKey', [])
const {isVisible} = useIOSToolbarState()
useScript(url)
useFavicon(url);
useKeySequence({ sequence: 'sequence', callback: () => console.log('yay') })
const idle = useIdle(5000);
useDocumentTitle('new title');
const orientation = useOrientation();
usePageLeave(() => {
console.log('come back')
});
const [value, updateCookie, deleteCookie] = useCookie(cookieName: string);
export default function App() {
const [ref, hovering] = useHover();
return (
<div ref={ref}>
IsHovering? {hovering ? "Yes" : "No"}
</div>
);
}
const [list, { set, push, removeAt, insertAt, updateAt, clear }] = useList([
"one",
"two",
"three",
]);
console.log(list)
const random = () => {
set([1, 2, 3])
push([1, 2, 3])
removeAt(1)
insertAt(1, "okay")
updateAt(1, "okay")
clear()
}
Authors
- Etuk Josiah Benjamin (@jobenetuk) β Studio Lumio
License
3 months ago
3 months ago
3 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
8 months ago
8 months ago
7 months ago
8 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago