react-select-items

react-select-items is a react package for multiple selection with keyboard and mouse. It offers a familiar interface similar to Windows File Explorer, allowing users to intuitively select items.

Demo

Storybook

Features

• Ctrl + click for toggle selection
• Shift + click for range selection
• Ctrl + Shift + click for multiple range selection
• Mouse click and drag for box selection

Installation

npm install react-select-items

Usage

Here's a basic example of how to use react-select-items:

import React from 'react';
import { SelectArea, Selectable } from 'react-select-items';

function App() {
  const handleSelect = (index: number) => {
    console.log('Selected:', index);
  };

  const handleUnselect = (index: number) => {
    console.log('Unselected:', index);
  };

  const handleFocus = (index: number) => {
    console.log('Focused:', index);
  };

  return (
    <SelectArea
      onSelect={handleSelect}
      onUnselect={handleUnselect}
      onFocus={handleFocus}
    >
      <div style={{ display: 'flex', gap: '10px' }}>
        <Selectable index={0}>
          <div>Item 1</div>
        </Selectable>
        <Selectable index={1}>
          <div>Item 2</div>
        </Selectable>
        <Selectable index={2}>
          <div>Item 3</div>
        </Selectable>
      </div>
    </SelectArea>
  );
}

export default App;

Customizing Styles

Changing Drag Box Style

You can customize the style of the drag box using CSS classes. The default class name is 'react-select-items-drag-box'. You can change the class name using the dragBoxClassName prop.

Example:

import React from 'react';
import { SelectArea, Selectable } from 'react-select-items';
import './custom-styles.css';

function App() {
  return (
    <SelectArea dragBoxClassName='custom-drag-box'>
      {/* Selectable items */}
    </SelectArea>
  );
}

And in your CSS file:

.custom-drag-box {
  border: 2px dashed blue !important;
  background-color: rgba(0, 0, 255, 0.1) !important;
  opacity: 0.5 !important;
}

Note: Use the !important rule to ensure your styles are applied.

API

SelectArea

Prop	Type	Description	Default Value	Required
onSelect	(index: number) => void	Callback function called when an item is selected	-	No
onUnselect	(index: number) => void	Callback function called when an item is unselected	-	No
onFocus	(index: number) => void	Callback function called when an item is clicked	-	No
options	object	Selection options object with properties listed below	-	No
options.useCtrl	boolean	Allows using Ctrl + click for toggle selection	true	No
options.useShift	boolean	Allows using Shift + click for range selection	true	No
options.useCtrlShift	boolean	Allows using Ctrl + Shift + click for multiple range selection	true	No
options.useDrag	boolean	Allows using mouse click and drag for box selection	true	No
options.useShiftToDrag	boolean	Requires holding Shift key for box selection	false	No
dragBoxClassName	string	CSS class name for the drag box	'react-select-items-drag-box'	No

Selectable

Prop	Type	Description	Default Value	Required
index	number	A unique number identifying the selectable item	-	Yes

License

This project is licensed under the MIT License.