react-dns
v0.7.0
Published
React component to select multiple items with the mouse cursor
Downloads
6
Readme
A lightweight, fully-tested (unit and e2e test), TypeScript'd, React library (1 component, and 1 hook!) to enable using the cursor to drag and select multiple items.
The underlying logic for this library was inspired from React Drag to Select.
This project was bootstrapped with Create React Library.
Features
No selected state management - Unlike [React Drag to Select](https://github.com/pablofierro/react-drag-select], this component does not managed if an item is selected. It's up to you to handle that. It only fires the hook once the item becomes selected.
Supports deeply nested items - Unlike [React Drag to Select](https://github.com/pablofierro/react-drag-select], the items you are trying to select don't need to be immediate children of the parent HOC. As long as they have the
useSelectableByDragging
inside of them, and theSupports virtualization - Unlike [React Drag to Select](https://github.com/pablofierro/react-drag-select], our library can support virtualized lists as well!
Setup
- Install dependency
- Add
API
DragSelection
This is the HOC which is used to create the drag context and draw the drag layer to the screen.
It has no props/configuration.
Example
<DragSelection>
{/* Any components you want selected go in here */}
</DragSelection>
useSelectableByDragging
This is the hook used by any component that is a descendant of <DragSelection>
. It fires every time the selected state of the component changes.
It returns an array with 2 values:
type UseSelectableByDraggingReturnType<RefType> = [
{ selected: boolean },
RefObject<RefType>
];
- An object containing
selected
which indicates if the component is being selected at that moment - A refObject which needs to be applied as the
ref
to the component you're trying to select
Note: For TypeScript users, you must pass in the first generic for
useSelectableByDragging
. This type must match the type of element you'll be applying the ref to (it gets passed touseRef
).
Example
const MyComponent: React.FC = () => {
// <HTMLDivElement> is used because the ref gets applied to a `div` below
const [{ selected }, ref] = useSelectableByDragging<HTMLDivElement>();
return <div {...{ ref }} />;
};