# rn-interactive

> [![npm](https://img.shields.io/npm/dm/rn-interactive?label=npm)](https://www.npmjs.com/package/rn-interactive) [![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/rn-interactive?color=green)](https://bundlephobia.com/result?p=react-in

Latest version **0.1.1** (published 2021-06-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-interactive
pnpm add rn-interactive
yarn add rn-interactive
bun add rn-interactive
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-06-07 |
| First published | 2021-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 31.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Iegor Azuaga |
| Maintainers | test |

## Links

- npm: https://www.npmjs.com/package/rn-interactive
- npm.io page: https://npm.io/package/rn-interactive

## Recent versions

- 0.1.1 (latest) — 2021-06-07
- 0.1.0 — 2021-06-03

## README

# rn-interactive

[![npm](https://img.shields.io/npm/dm/rn-interactive?label=npm)](https://www.npmjs.com/package/rn-interactive) [![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/rn-interactive?color=green)](https://bundlephobia.com/result?p=react-interactive) ![npm type definitions](https://img.shields.io/npm/types/rn-interactive?color=blue)

> Handle interactions with your components effectively across platforms

- Consistent API across desktop and touch devices
- DOM events handled by React
- Only `932 bytes` gzipped

## Installation

```shell
npm install rn-interactive
```

## Usage example

```jsx
import { Interactive } from 'rn-interactive';

function Button({ disabled = false }) {
  return (
    <Interactive disabled={disabled}>
      {({ isHovered, isFocused, isPressed }) => (
        <View
          accessibilityRole="button"
          accessible={!disabled}
          style={[
            styles.button,
            isHovered && styles.hovered,
            isFocused && styles.focused,
            isPressed && styles.pressed,
            disabled && styles.disabled,
          ]}
        >
          <Text>{title}</Text>
        </View>
      )}
    </Interactive>
  );
}
```

## API

### Interactive

Create an Interactive component

Props | Type | Description
--- | --- | ---
children | `Element` or `Function` | Element or callback providing the current state.
disabled | `boolean` | Prevents the interaction when enabled. Default to `false`.
onHoverIn | `function` | Callback when the element is `hovered`.
onHoverOut | `function` | Callback when the element loses the `hovered` state.
onPressIn | `function` | Callback when the element is `pressed`.
onPressOut | `function` | Callback when the element loses the `pressed` state.
onFocusIn | `function` | Callback when the element is `focused`.
onFocusOut | `function` | Callback when the element loses the `focused` state.

---
_Source: https://npm.io/package/rn-interactive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._