React-select-items NPM

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