React Tailor ✂️

demo

Tailor adjusts the size of text within its children to try and fit it within the available horizontal and vertical space.

Currently tailor only works (and enforces) a single line of non-wrapping text. This might change in the future, but there are also other solution that work with multiple lines of text (see Similar Projects below).

Uses React Measure to resize an element only if its size changes.

Install

yarn add react-tailor

Tailor Component

Wrap any child component and calculate its client rect.

Props

canGrow: boolean

default: false

Can the text size up above its initial size?

minSize: number

default: 11

The minimum size (in px) that text will be sized down to fit. Once text has reached this size and ellipsis will be added to any text cut off.

Example

import Tailor from 'react-tailor'

class Tailor extends Component {
  render() {
    return (
      <div>
        <h1>
          <Tailor>Title Text</Tailor>
        </h1>
        <ul>
          <li>
            <Tailor>List Item</Tailor>
          </li>
          <li>
            <Tailor>List Item 2</Tailor>
          </li>
        </ul>
      </div>
    )
  }
}

Running the demo locally

1. clone repo

   git clone git@github.com:chrisdrackett/react-tailor.git

2. install dependencies

   yarn

3. run dev mode

   yarn start

4. open your browser and visit: http://localhost:3000/

Similar Projects

• React FitText

  similar, but resizes all elements on browser resize even if their parent is the same size. Does not calculate best size automatically.

• React TextFit

  Supports paragraphs but is heavier.