react-tiny-hooks

A small but growing collection of simple hooks for React.js that you could easily type out yourself but you're too lazy 🐌.

All the hooks are exposed as separate files, like so:

import useEvent from "react-tiny-hooks/use-event";

Contributing

New hooks or ideas for new hooks are very welcome, as long as they are simple and dependency free!

Hooks

• use-counter
• use-debounce
• use-event
• use-is-mounted
• use-on-click-outside
• use-on-escape
• use-previous
• use-scroll-position
• use-throttle
• use-toggle

useCounter(initialValue = 0, min = 0, max = Infinity, step = 1)

Import: react-tiny-hooks/use-counter

This hook counts things. Useful for things like slideshows/carousels.

const [count, increase, decrease, setCount] = useCounter(0, 0, 10, 1);

// Or a slideshow version:
const [current, next, previous, goTo] = useCounter(0, 0, slides.length);

useDebounce(value, wait = 0)

Import: react-tiny-hooks/use-debounce

Returns a debounced version of value. Useful for stuff like autosuggest.

const [state, setState] = useState();

const debouncedState = useDebounce(state, 200);

useEvent(eventName, eventHandler, dependencies = [])

Import: react-tiny-hooks/use-event

Attach an event listener to window.

const [width, setWidth] = useState(0);
useEvent("resize", () => setWidth(window.innerWidth));

// With dependency
const onKeyDown = useCallback(e => setSomething(e));
useEvent("keydown", onKeydown, [onKeyDown]);

useIsMounted()

Import: react-tiny-hooks/use-is-mounted

Returns a boolean indicating whether the component is currently mounted. Useful for server side rendering.

const isMounted = useIsMounted();

useOnClickOutside(callback, dependencies = [])

Import: react-tiny-hooks/use-on-click-outside

Returns a ref to be attached to a React element. Whenever a click event occurs outside of that ref, callback is called.

const ref = useOnClickOutside(() => console.log("yay"));

return <div ref={ref} />;

useOnEscape(callback, dependencies = [])

Import: react-tiny-hooks/use-on-escape

Calls callback whenever the Escape key is pressed (on keydown).

useOnEscape(() => console.log("Escape was pressed!"));

usePrevious(value, initialValue)

Import: react-tiny-hooks/use-previous

Returns the value of value from the previous render.

const [value, setValue] = useState();
const previousValue = usePrevious(value);

useScrollPosition()

Import: react-tiny-hooks/use-scroll-position

Returns the current scroll position.

const scrollPosition = useScrollPosition();

useThrottle(value, wait = 0)

Import: react-tiny-hooks/use-throttle

Returns a throttled version of value

const [state, setState] = useState();

const throttledState = useThrottle(state, 200);

useToggle(initialValue = false)

Import: react-tiny-hooks/use-toggle

Returns a boolean flag (value) and functions for updating it.

const [value, toggle, activate, deactivate] = useToggle();