React-abbr

A component for ReactJS. Used for omitting the middle fragment in the single-line text. It is also adaptive when dragging the window screen.

Description

In the space where the display width is limited, it can show the head and tail of a string of characters. Through this way, it will be easier to infer the meaning of the string.

The component is exactly what you need ！

Install

NPM or YARN

npm install react-abbr 

or

yarn add react-abbr

Usage

props

Prop	Type	Required	Description
text	String	✓	This is the showing string

import in ReactComponent

import React from 'react'
import ReactAbbr from 'react-abbr'
import 'react-abbr/dist/reactAbbr.css'

<div style={{ width: '170px' }}>
  <ReactAbbr text={'hello, world! This is ReactAbbr Component.'} />
</div>

<!-- Result -->
hello, wo... omponent.