
Product
Introducing Repository Labels and Security Policies
Socket is introducing a new way to organize repositories and apply repository-specific security policies.
@air/react-drag-to-select
Advanced tools
A performant React library which adds drag to select to your app
A highly-performant React library which adds drag-to-select to your app.
npm install --save @air/react-drag-to-select
yarn add @air/react-drag-to-select
import { useSelectionContainer } from '@air/react-drag-to-select'
const App = () => {
const { DragSelection } = useSelectionContainer();
return (
<div>
<DragSelection/>
<div>Selectable element</div>
</div>
)
}
Check out this codesandbox for a complete working example: https://codesandbox.io/s/billowing-lake-rzhid4
Name | Required | Type | Default | Description |
---|---|---|---|---|
onSelectionStart | No | () => void | Method called when selection starts (mouse is down and moved) | |
onSelectionEnd | No | () => void | Method called when selection ends (mouse is up) | |
onSelectionChange | Yes | (box: Box) => void | Method called when selection moves | |
isEnabled | No | boolean | true | If false, selection does not fire |
eventsElement | No | Window , HTMLElement or null | window | Element to listen mouse events |
selectionProps | No | React.HTMLAttributes | Props of selection - you can pass style here as shown below | |
shouldStartSelecting | No | () => boolean | undefined | If supplied, this callback is fired on mousedown and can be used to prevent selection from starting. This is useful when you want to prevent certain areas of your application from being able to be selected. Returning true will enable selection and returning false will prevent selection from starting. |
To style the selection box, pass selectionProps: { style }
prop:
const { DragSelection } = useSelectionContainer({
...,
selectionProps: {
style: {
border: '2px dashed purple',
borderRadius: 4,
backgroundColor: 'brown',
opacity: 0.5,
},
},
});
The default style for the selection box is
{
border: '1px solid #4C85D8',
background: 'rgba(155, 193, 239, 0.4)',
position: `absolute`,
zIndex: 99,
}
Sometimes you want to disable a user being able to start selecting in a certain area. You can use the shouldStartSelecting
prop for this.
const { DragSelection } = useSelectionContainer({
shouldStartSelecting: (target) => {
/**
* In this example, we're preventing users from selecting in elements
* that have a data-disableselect attribute on them or one of their parents
*/
if (target instanceof HTMLElement) {
let el = target;
while (el.parentElement && !el.dataset.disableselect) {
el = el.parentElement;
}
return el.dataset.disableselect !== "true";
}
/**
* If the target doesn't exist, return false
* This would most likely not happen. It's really a TS safety check
*/
return false;
}
});
See full example here: https://codesandbox.io/s/exciting-rubin-xxf6r0
Because we use the mouse position to calculate the selection box's coordinates, if your <DragSelection />
is inside of an area that scrolls, you'll need to make some adjustments on your end. Our library can't inherently know which parent is being scrolled nor of it's position inside of the scrolling parent (if there are other sibling elements above it).
How this is solved on your end is modifiying the left
(for horizontal scrolling) and top
(for vertical scrolling) of the selectionBox
that is passed to handleSelectionChange
. See the onSelectionChange
in the example for an idea of how to do this.
FAQs
A performant React library which adds drag to select to your app
The npm package @air/react-drag-to-select receives a total of 0 weekly downloads. As such, @air/react-drag-to-select popularity was classified as not popular.
We found that @air/react-drag-to-select demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is introducing a new way to organize repositories and apply repository-specific security policies.
Research
Security News
Socket researchers uncovered malicious npm and PyPI packages that steal crypto wallet credentials using Google Analytics and Telegram for exfiltration.
Product
Socket now supports .NET, bringing supply chain security and SBOM accuracy to NuGet and MSBuild-powered C# projects.