createPress

Handles press interactions across mouse, touch, keyboard, and virtual clicks. This is the foundation for createButton and other interactive components.

Import

import { createPress } from '@proyecto-viviana/solidaria';

Usage

const { pressProps, isPressed } = createPress({
  onPress: () => setStatus('pressed'),
  onPressStart: () => setStatus('press started'),
  onPressEnd: () => setStatus('press ended'),
});

return (
  <div {...pressProps} tabIndex={0} role="button">
    Press me
  </div>
);

Interactive Card

Make any element pressable while normalizing all input types.

Press count: 0

Last input: none

Try clicking, touching, or pressing Enter/Space

const { pressProps, isPressed } = createPress({
  onPress: (e) => setLastInput(e.pointerType),
});

<div
  {...pressProps}
  tabIndex={0}
  role="button"
  class={isPressed() ? 'scale-95' : ''}
>
  Click, touch, or press Enter/Space
</div>

Press State Tracking

Track press start and end separately for visual feedback.

Press and hold me

Watch the events log →

Event Log:

No events yet...

const { pressProps, isPressed } = createPress({
  onPressStart: (e) => setStatus('pressing...'),
  onPressEnd: (e) => setStatus('released'),
  onPress: (e) => setStatus('completed!'),
});

Parameters

Props

Prop	Type	Default	Description
`onPress`	(e: PressEvent) => void	—	Handler called when a press is completed (pointer up within element)
`onPressStart`	(e: PressEvent) => void	—	Handler called when a press starts
`onPressEnd`	(e: PressEvent) => void	—	Handler called when a press ends (either completed or cancelled)
`onPressChange`	(isPressed: boolean) => void	—	Handler called when the pressed state changes
`onPressUp`	(e: PressEvent) => void	—	Handler called when pointer is released over the element
`isDisabled`	boolean	`false`	Whether press events are disabled
`isPressed`	boolean	—	Whether the element is pressed (controlled)
`preventFocusOnPress`	boolean	`false`	Prevent focus when pressing with mouse/touch
`shouldCancelOnPointerExit`	boolean	`false`	Cancel press when pointer leaves element
`allowTextSelectionOnPress`	boolean	`false`	Allow text selection during press

Return Value

Props

Prop	Type	Default	Description
`pressProps`	JSX.HTMLAttributes	—	Props to spread on the target element
`isPressed`	Accessor<boolean>	—	Signal indicating if element is currently pressed

PressEvent Object

Props

Prop	Type	Default	Description
`type`	'pressstart' \| 'pressend' \| 'pressup' \| 'press'	—	The type of press event
`pointerType`	'mouse' \| 'pen' \| 'touch' \| 'keyboard' \| 'virtual'	—	The type of pointer that triggered the event
`target`	HTMLElement	—	The element that was pressed
`shiftKey`	boolean	—	Whether shift key was held
`ctrlKey`	boolean	—	Whether ctrl key was held
`metaKey`	boolean	—	Whether meta/cmd key was held
`altKey`	boolean	—	Whether alt key was held

Pointer Type Handling

The hook normalizes interactions across different input methods:

mouse - Desktop mouse clicks
touch - Mobile/tablet touch events
pen - Stylus interactions
keyboard - Enter or Space key presses
virtual - Programmatic triggers (e.g., element.click())

Accessibility

Supports keyboard activation via Enter and Space keys
Works with screen reader virtual clicks
Remember to add role="button" and tabIndex=0 for non-button elements
Press is cancelled if pointer exits element (prevents accidental activation)
Prevents text selection during press for better UX