---
name: HoverableTextTouchHighlight
route: /Hoverables/HoverableTextTouchHighlight
menu: Hoverables
---

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

## HoverableTextTouchHighlight

## 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>
  <HoverableTextTouchHighlight
    text={'Change text color only'}
    style={{ backgroundColor: colors.primary3 }}
    hoverStyle={{ backgroundColor: colors.primary3 }}
    textHoverStyle={{ color: colors.teal }}
    onPress={() => alert('A button was pressed !')}
  />
</Playground>

<Playground>
  <HoverableTextTouchHighlight
    text={'Change text color and backgroundColor'}
    hoverStyle={{ backgroundColor: colors.primary2 }}
    textHoverStyle={{ color: colors.teal }}
    onPress={() => alert('A button was pressed !')}
  />
</Playground>

<Playground>
  <HoverableTextTouchHighlight
    text={'Change backgroundColor only'}
    style={{ backgroundColor: colors.primary1 }}
    hoverStyle={{ backgroundColor: colors.primary3 }}
    onPress={() => alert('A button was pressed !')}
  />
</Playground>

<Playground>
  <HoverableTextTouchHighlight
    text={'Smaller and rounded'}
    style={{
      borderRadius: 30,
      width: 250,
    }}
    hoverStyle={{ backgroundColor: colors.primary2 }}
    textHoverStyle={{ color: colors.teal }}
    onPress={() => alert('A button was pressed !')}
  />
</Playground>

## Properties

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

## Implementation Notes

The default background color of the Touchable is `colors.primary3`, and the
default color of the text is `colors.primary2`.

These props are embedded in the `style`|`hoverStyle` and
`textStyle`|`textHoverStyle` style objects, and can be overrided as such.

In the future, we may want to simplify the props and use things like
`backgroundColor`, `textColor`, `backgroundColorHover`, `textColorHover`, etc.,
while still exposing the additional props so it's fully configurable.

# Design Notes

The reccomended colors aren't really ironed out here - ideally we'd start with a
darker color and go to a lighter color on hover.

This component was born out of a few custom implementations, so consider the
style examples above to be temporary.
