react-texty

A straight forward text component with tooltip support when it's truncated.

View demo View Github

Install

# Yarn
yarn add react-texty

# NPM
npm install --save react-texty

Props

• tagName string Tag name for the component, defaults to div
• children node, Should be string or inline element
• tooltip node Tooltip for the truncated text if set, or the children will be used
• tooltipClassName string Classname for the tooltip
• tooltipStyle object Custom style of the tooltip
• showDelay number Delay milliseconds to show when mouse enter, defaults to 150
• hideDelay number Delay milliseconds to hide when mouse leave, defaults to 150
• arrowClassName string Classname for the arrow
• hideArrow bool Whether to show the tooltip arrow, defaults to false
• placement top|top-start|top-end|bottom|bottom-start|bottom-end The placement of the tooltip, defaults to top

Usage

import Text from 'react-texty'
// import the styles
import 'react-texty/styles.css'

// just use it as a normal text node
<Text>Hello world</Text>
<Text tagName="a">Hello world</Text>
<Text tooltip="Something else">Hello world</Text>

GitHub