DocsDocsBlocksBlocksStorybookStorybook (opens in a new tab)SupportSupport
GitHubGitHub (opens in a new tab)
  • ๐Ÿ‘‹ โ Introduction
    • Setup
    • Philosophy
    • Storybook
    • Migration
    • Getting Started
    • API
    • Blocks
    • Customization
    • Icons
      • Data Size
      • Date Format
      • Duration
      • Ellipsis
      • Infinity List
      • Pager
      • Pluralize
      • Redact
      • Sort
      • Avatar
      • Avatar Group
      • Badge
      • Button
      • Chip
      • Command Palette
      • Icon Button
      • Kbd
      • Loader
      • Calendar
      • Checkbox
      • Debounced Input
      • Date Input ๐Ÿ†•
      • Inline Input
      • Input
      • Radio
      • Range
      • Select
      • Textarea
      • Toggle
      • Backdrop
      • Context Menu
      • Dialog
      • Drawer
      • Menu
      • Notification
      • Popover
      • Tooltip
      • Block
      • Breadcrumbs ๐Ÿ†•
      • Card
      • Collapse
      • Divider
      • JSON Tree ๐Ÿ†•
      • List
      • Motion
      • Stack
      • Stepper ๐Ÿ†•
      • Tabs
      • Tree
      • Vertical Spacer
      • Typography
    • Overlay
    • Portal
    • useCursor
    • useExitListener
    • useId
    • usePosition
    • useComponentTheme
    • useTheme
    • useUserSelect
    • Best Practices
    • Tools
    • Animations
    • Forms
    • Table
    • Uploads
  • ๐Ÿ““ โ Changelog

On This Page

  • Examples
  • API
Edit this page
Docs
โš™๏ธ โ Utils
useUserSelect

User Select

A small hook that sets the css body user select according to a state. This is useful for dragging when cursors go outside the thing they are dragging.

Examples

const [hovered, setHovered] = useState()
 
useUserSelect(hovered) // -> sets body to user-select: none

API

ParameterType
activeboolean
Source: https://github.com/reaviz/reablocks/blob/633b1c9cc185a4574b4422dfa0757cda146002c0/src/utils/useUserSelect.ts#L6
useThemeBest Practices
Made with โค๏ธ by Good Code