use-selectify notion demo

Example created only for demonstration purposes. It is not intended to add/remove text or blocks.

The selection box is completely managed by use-selectify. Try drag-selecting some blocks.

use-selectify is a React selection box library created out of need and designed to be production-ready and blazingly fast. It provides an accessible approach to managing selection of elements in a React application with a useSelectify hook. This hook will return an array of all elements that have been selected by a specified ref, which can be used for further processing or to render the selected elements on the page.

Drag interactions are one of the most challenging aspects of the web. Having full control of the exact behavior of those interactions is essential, yet most available libraries out there feel like they are still not up to the task.

Recognizing this need, use-selectify is a robust React element selection library that aims to address these issues and provide a powerful starting point for drag interactions while still being an accessible approach to managing both visual and logical selection of elements in a React application with a hook.

✅ Automatic Window Scrolling

✅ Flexible and Lightweight (3kB gzipped)

✅ Accessible by Default

✅ Fine-Grained Control

✅ Simple to Style

✅ Works on mobile

✅ SSR Support

$ npm i use-selectify or $ yarn add use-selectify