# usePress



## Features

`usePress` returns the current press state, which can be used to adjust
the visual appearance of the target. If the pointer is released over the target, then an `onPress` event is fired.

* Handles mouse and touch events
* Handles <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> key presses
* Handles screen reader virtual clicks
* Uses pointer events where available, with fallbacks to mouse and touch events
* Normalizes focus behavior on mouse and touch interactions across browsers
* Handles disabling text selection on mobile while the press interaction is active
* Handles canceling press interactions on scroll
* Normalizes many cross browser inconsistencies

{/* TODO: uncomment once blog posts are transferred over */}

{/* Read our [blog post](/blog/building-a-button-part-1.md) about the complexities of press event handling to learn more. */}

## Example

This example shows a simple target that handles press events with `usePress` and logs them to a list below.
It also uses the `isPressed` state to adjust the background color when the target is pressed.
Press down on the target and drag your pointer off and over to see when the events are fired, and try focusing
the target with a keyboard and pressing the <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> keys to trigger events as well.

{/* Not implemented yet */}

{/* **NOTE: for more advanced button functionality, see [useButton](useButton.md).** */}

```tsx
import React from 'react';
import {usePress} from '@react-aria/interactions';

function Example() {
  let [events, setEvents] = React.useState([]);
  let {pressProps, isPressed} = usePress({
    onPressStart: e => setEvents(
      events => [...events, `press start with ${e.pointerType}`]
    ),
    onPressEnd: e => setEvents(
      events => [...events, `press end with ${e.pointerType}`]
    ),
    onPress: e => setEvents(
      events => [...events, `press with ${e.pointerType}`]
    )
  });

  return (
    <>
      <div
        {...pressProps}
        style={{
          background: isPressed ? 'darkgreen' : 'green',
          color: 'white',
          display: 'inline-block',
          padding: 4,
          cursor: 'pointer'
        }}
        role="button"
        tabIndex={0}>
        Press me!
      </div>
      <ul
        style={{
          maxHeight: '200px',
          overflow: 'auto'
        }}>
        {events.map((e, i) => <li key={i}>{e}</li>)}
      </ul>
    </>
  );
}
```

## API

<FunctionAPI
  function={docs.exports.usePress}
  links={docs.links}
/>

### PressEvents

### PressResult

| Name | Type | Description |
|------|------|-------------|
| `isPressed` \* | `boolean` | Whether the target is currently pressed. |
| `pressProps` \* | `DOMAttributes<FocusableElement>` | Props to spread on the target element. |

### PressEvent

Each of these handlers is fired with a `PressEvent`, which exposes information about the target and the
type of event that triggered the interaction.