reactuse

Appearance

Working with DOM elements ​

Common library limitations ​

Many React libraries that work with DOM elements typically support only one way of providing target elements - usually through refs.

typescript
const ref = useRef<HTMLDivElement>(null);
useClickOutside(ref, () => console.log('Clicked outside'));

This limitation forces developers to always create refs by themselves, even in cases where they might have not want to create additional refs or want to use different selection methods, like querySelector.

Flexible target handling with typescript overloads ​

Our library implements a flexible approach using typescript function overloads that allows hooks to work with targets in two different ways:

  1. By passing an existing target (ref, DOM element, function that returns a DOM element, or selector)
typescript
const ref = useRef<HTMLDivElement>(null);
useClickOutside(ref, () => console.log('Clicked outside'));

or you can use target function

typescript
import { target } from '@siberiacancode/reactuse';

useClickOutside(target('#container'), () => console.log('Clicked outside'));
  1. By receiving a ref callback that can be attached to an element
typescript
const ref = useClickOutside<HTMLDivElement>(() => console.log('Clicked outside'));

This dual approach provides better developer experience and more flexibility in different use cases.

The target function ​

The target is a utility function that helps you work with DOM elements in a flexible way. It allows you to reference DOM elements using different approaches:

  • React refs (RefObject)
  • Direct DOM elements (Element | Window | Document)
  • Functions that return a DOM element (() => Element | Window | Document)
  • Query selectors (string)

The flexibility of target means you can use our hooks like you want.

typescript
import { target } from '@siberiacancode/reactuse';

useClickOutside(target('#container'), () => console.log('Clicked outside'));

// or

useClickOutside(target(document.getElementById('container')), () => console.log('Clicked outside'));