react-text-overflow

React Text Overflow Component
=========================

See it in action

React Text Overflow is a React component that targets the ability to overflow a single line of text (with ellipses) from the left, or the center, or from an offset. Hoping one day this is entireably possible with CSS but we're not quite there yet.



Installation

React Text Overflow requires React 17 or later.

``
npm i -S react-text-overflow
`

Examples

* Live Examples
* In Repo

Examples

$3

This is the most basic usecase, which honestly you should just use vanilla CSS for this piece. It will overflow text from the end.

`jsx
import React from 'react';
import TextOverflow from 'react-text-overflow';

const MyComponent = () => (

)
`

$3

This will break the text in the center allowing the beginning and end to show.

`jsx
const MyComponent = () => (

)
`

$3

This will break after the first 10 characters.

`jsx
const MyComponent = () => (

)
`

$3

This causes the text to overflow from the left of the element.

`jsx
const MyComponent = () => (

)
`

Props

#### truncatePosition
Type: start | middle | end Default: end

This is what determines where the text will overflow.

#### startPos
Type: Number Default: 0

This is to be used in combination with truncatePosition center, this will break the text in that location.

Building TextOverflow

`
npm run build
`

Running examples

`
cd examples
npm run dev
``