react-select-items v1.1.0
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
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.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago