@rnw-community/hoverable

React Native Hoverable

Bring hover and additional state to custom components and React Native components.

This package exposes withHover higher order component.

Following states and props will be added to the passed component:

state	style prop	state flag
Disabled	disabledStyle	isDisabled
Active	activeStyle	isActive
Hovered	hoverStyle	isHovered
Regular	style

Component can only be in one state.

Hoverable components can be nested, giving ability to receive state from the parent Hoverable component.

Example usage:

import { HoverView, withHover } from '@rnw-community/hoverable';
import { Text } from 'react-native';

const TextComponent = ({ style }) => <Text style={style}>I am a component</Text>;

const HoverTextComponent = withHover(TextComponent);

const Example = () => (
    <HoverView>
        <HoverTextComponent hoverStyle={{ backgroundColor: 'red' }} />
        <HoverTextComponent hoverStyle={{ backgroundColor: 'green' }} />
    </HoverView>
);

License

This library is licensed under The MIT License.