@rnw-community/hoverable
TypeScript icon, indicating that this package has built-in type declarations

0.65.2 • Public • Published

React Native Hoverable

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

npm version npm downloads

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.

Dependencies (0)

    Dev Dependencies (8)

    Package Sidebar

    Install

    npm i @rnw-community/hoverable

    Weekly Downloads

    4

    Version

    0.65.2

    License

    MIT

    Unpacked Size

    38.9 kB

    Total Files

    83

    Last publish

    Collaborators

    • vitalyiegorov