react-texty
A straight forward text component with tooltip support when it's truncated
Install
# Yarn yarn add react-texty # NPM npm install --save react-texty
Props
- tagName
string
Tag name for the component, defaults todiv
- 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 - tooltipMaxWidth
number
Max width of the tooltip - showDelay
number
Delay milliseconds to show when mouse enter, defaults to150
- hideDelay
number
Delay milliseconds to hide when mouse leave, defaults to150
- arrowClassName
string
Classname for the arrow - hideArrow
bool
Whether to show the tooltip arrow, defaults tofalse
- placement
top|top-start|top-end|bottom|bottom-start|bottom-end
The placement of the tooltip, defaults totop
Learn more at https://nihgwu.github.io/react-texty/
Usage
import Text from 'react-texty'// import the stylesimport 'react-texty/styles.css' // just use it as a normal text node<Text>Hello world</Text><Text ="a">Hello world</Text><Text ="Something else">Hello world</Text>
License
MIT © Neo Nie