---
name: HoverableText
route: /Hoverables/HoverableText
menu: Hoverables
---

import { Playground, PropsTable } from 'docz'
import { HoverableText } from '../../src'
import { Alert } from 'react-native'
import { colors, hexToRgba } from '@barcard/functions'

## HoverableText

## About

By default, `react-native` does not contain any logic for listenting to hover
events (_it's for phones, remember!_).

This implementation taps into the `onMouseEnter` and `onMouseLeave` events to
implement 'hover' styles for the web.

## Basic Usage

<Playground>
  <HoverableText
    children={'Change text color only'}
    textStyle={{ color: colors.secondary1 }}
    textHoverStyle={{ color: colors.white }}
    onPress={() => alert('A button was pressed !')}
    outerContainerStyle={{ marginBottom: 20 }}
  />
  <HoverableText
    children={'Change text color only'}
    textStyle={{ color: hexToRgba(colors.white, 0.5) }}
    textHoverStyle={{ color: hexToRgba(colors.white, 0.95) }}
    onPress={() => alert('A button was pressed !')}
  />
</Playground>

## Properties

<PropsTable of={HoverableText} includeDescription={true} />
