0.1.1 • Published 3 years ago
rn-interactive v0.1.1
rn-interactive
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. |