walmat / react-drag-and-select Goto Github PK

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.

1. 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.

2. 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 the

3. Supports virtualization - Unlike [React Drag to Select](https://github.com/pablofierro/react-drag-select], our library can support virtualized lists as well!

1. Install dependency
2. Add

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.

<DragSelection>
  {/* Any components you want selected go in here */}
</DragSelection>

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>
];

1. An object containing selected which indicates if the component is being selected at that moment
2. 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 to useRef).

const MyComponent: React.FC = () => {
  // <HTMLDivElement> is used because the ref gets applied to a `div` below
  const [{ selected }, ref] = useSelectableByDragging<HTMLDivElement>();

  return <div {...{ ref }} />;
};