Pressable

The @bento/pressable package provides a standardized foundation for interactive elements in the Bento library. It exports the Pressable primitive, which provides consistent press interactions and accessibility features for building interactive components.

Installation

npm install --save @bento/pressable

Props

The @bento/pressable package exports the Pressable primitive:

import { Pressable } from '@bento/pressable';

<Pressable onPress={() => console.log('Div pressed!')}>
  <div>Press me</div>
</Pressable>

The following properties are available to be used on the Pressable primitive:

| Prop | Type | Required | Description | |------|------|----------|------------| | children | ReactElement<any, string \| JSXElementConstructor<any>> | Yes | A single React element that will be made pressable. | | onPress | (e: PressEvent) => void | No | Handler that is called when the pressable is pressed. Similar to the standard onClick event, but normalized to handle all interaction methods consistently. | | onPressStart | (e: PressEvent) => void | No | Handler that is called when a press interaction starts. | | onPressEnd | (e: PressEvent) => void | No | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. | | onPressChange | (isPressed: boolean) => void | No | Handler that is called when the press state changes. | | onPressUp | (e: PressEvent) => void | No | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. | | slot | string | No | A named part of a component that can be customized. This is implemented by the consuming component. The exposed slot names of a component are available in the components documentation. | | slots | Record<string, object \| Function> | No | An object that contains the customizations for the slots. The main way you interact with the slot system as a consumer. |

For all other properties specified on the Pressable primitive, the component will pass them down to the direct child element of the component. Which would be the equivalent of you adding them directly to the child element.

import { Pressable } from '@bento/pressable';

function MyComponent() {
  return (
    <Pressable onPress={() => console.log('Pressed!')}>
      <div>Press me</div>
    </Pressable>
  );
}

Examples

Basic Div Element

The simplest way to use Pressable is to wrap a div element. The component will handle all the necessary accessibility features and interaction states.

Link Element

You can also make link elements pressable while maintaining their semantic meaning and default browser behavior.

Custom Component

For custom components, you need to forward the ref and pass props to the underlying element to ensure proper functionality.

Accessibility

The Pressable component automatically handles accessibility features:

• Keyboard Navigation: Supports Enter and Space key activation
• Focus Management: Proper focus handling and focus-visible states
• ARIA Attributes: Automatically applies appropriate ARIA attributes
• Screen Reader Support: Works seamlessly with assistive technologies

Data Attributes

The following data attributes are exposed and can be used for styling:

| Attribute | Description | Example Values | | -------------------- | ------------------------------------------------------- | -------------- | | data-pressed | Indicates the element is being pressed | "true" | | data-hovered | Indicates the element is hovered | "true" | | data-focused | Indicates the element has focus | "true" | | data-focus-visible | Indicates focus should be visible (keyboard navigation) | "true" |

[data-pressed='true'] {
  background-color: #ccc;
}

[data-focus-visible='true'] {
  outline: 2px solid blue;
}