https://github.com/nihgwu/react-texty

A straight forward text component with tooltip support when it's truncated
https://github.com/nihgwu/react-texty

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/nihgwu/react-texty
• Owner: nihgwu
• License: mit
• Created: 2019-07-15T11:07:52.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-03-05T22:30:45.000Z (9 months ago)
• Last Synced: 2024-09-22T21:24:21.308Z (3 months ago)
• Language: JavaScript
• Homepage: https://nihgwu.github.io/react-texty/
• Size: 2.06 MB
• Stars: 20
• Watchers: 3
• Forks: 4
• Open Issues: 46
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-texty

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

## Install

```bash

# 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

- **tooltipMaxWidth** `number` Max width 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`

Learn more at https://nihgwu.github.io/react-texty/

## Usage

```jsx

import Text from 'react-texty'

// import the styles

import 'react-texty/styles.css'

// just use it as a normal text node

Hello world

Hello world

Hello world

```

## License

MIT © [Neo Nie](https://github.com/nihgwu)