0.1.1 • Published 5 years ago

rn-interactive

Licence

MIT

Version

0.1.1

Deps

Size

32 kB

Vulns

Weekly

Summary Dependency Versions

rn-interactive

npm type definitions

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

npm install rn-interactive

Usage example

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.