1.1.0 • Published 10 months ago

react-select-items v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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

PropTypeDescriptionDefault ValueRequired
onSelect(index: number) => voidCallback function called when an item is selected-No
onUnselect(index: number) => voidCallback function called when an item is unselected-No
onFocus(index: number) => voidCallback function called when an item is clicked-No
optionsobjectSelection options object with properties listed below-No
options.useCtrlbooleanAllows using Ctrl + click for toggle selectiontrueNo
options.useShiftbooleanAllows using Shift + click for range selectiontrueNo
options.useCtrlShiftbooleanAllows using Ctrl + Shift + click for multiple range selectiontrueNo
options.useDragbooleanAllows using mouse click and drag for box selectiontrueNo
options.useShiftToDragbooleanRequires holding Shift key for box selectionfalseNo
dragBoxClassNamestringCSS class name for the drag box'react-select-items-drag-box'No

Selectable

PropTypeDescriptionDefault ValueRequired
indexnumberA unique number identifying the selectable item-Yes

License

This project is licensed under the MIT License.

1.1.0

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago

0.0.18

10 months ago

0.0.17

10 months ago

0.0.16

10 months ago

0.0.15

10 months ago

0.0.14

10 months ago

0.0.13

10 months ago

0.0.12

10 months ago

0.0.11

10 months ago

0.0.10

10 months ago

0.0.9

10 months ago

0.0.8

10 months ago

0.0.7

10 months ago

0.0.6

10 months ago

0.0.5

10 months ago

0.0.3

10 months ago

0.0.2

10 months ago

0.0.1

10 months ago

0.0.0

10 months ago