DragHandle

DragHandle is a new component to make it easier when creating draggable elements. it contains the styling for focus, hover and dragging states. This component only needs to be used if you're creating a custom component with drag, some of our components already have this implemented, for example Card.

Import

import { DragHandle } from '@contentful/f36-components';
// or
import { DragHandle } from '@contentful/f36-drag-handle';

Examples

The DragHandle can be styled based on the props you pass to it:

Base:

<DragHandle label="Drag handle" />
<DragHandle label="Drag handle" />
Hide source

Active:

<DragHandle isActive label="Active drag handle" />
<DragHandle isActive label="Active drag handle" />
Hide source

Focused:

<DragHandle isFocused label="Focus drag handle" />
<DragHandle isFocused label="Focus drag handle" />
Hide source

Hovered:

<DragHandle isHovered label="Hovered drag handle" />
<DragHandle isHovered label="Hovered drag handle" />
Hide source

Card example

<AssetCard title="Title" withDragHandle>
  <Text>This is a card example with DragHandle</Text>
</AssetCard>
<AssetCard title="Title" withDragHandle>
  <Text>This is a card example with DragHandle</Text>
</AssetCard>
Hide source

• Name

  label(required)

  Description

  Label rendered in DragHandle - not visible on screen as its purpose is for screen readers only

  string
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  isActive

  Description

  Applies styling for when the component is actively being dragged by the user

  false

  true
• Name

  isFocused

  Description

  Applies focus styling

  false

  true
• Name

  isHovered

  Description

  Applies hover styling

  false

  true
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-drag-handle
• Name

  type

  Description

  Set type button for div element

  string

Accessibility

• You should pass a relevant label to DragHandle for screen readers, the label is not rendered.