react-best-fit

Size text to fit its container

Maximize your size

This package exports a React component that will try to size the supplied content to the largest allowable size. The structure of this content, and the sizing rules, are defined by you.

Usage

This component requires its parent to have a position: relative style; see How It Works for more information on why.

| Parameter | Type | Description | Required | | ----------------------- | --------------- | ---------------------------------------------------- | -------- | | sizes | arrayOf(string) | Array of allowable sizes. Order smallest to largest. | required | | containerHeight | number | Height of container (in px) | required | | containerWidth | number | Width of container (in px) | required | | content(size, metadata) | function | A function to return the content to fit. | required |

The content function

This function is passed a size (an entry from the sizes array) as the first parameter, and a metadata object as the second parameter. This function should return a React node/fragment.

The metadata object may contain a test property, which is true if the rendering is a "testing" render and false or missing if the rendering is the final render. In most cases you can safely ignore this, but it can be useful if you need custom sizing rules.

Determining the container height and width

This component works well when paired with react-measure. Pass the parent's dimensions through to ReactBestFit.

Example

import React from 'react';
import ReactBestFit from 'react-best-fit';

const content = size => (
  <div className={size}>
    <h1>The content to fit</h1>
    <p>Make sure this fits nicely in the container</p>
  </div>
);

export default () => {
  return <ReactBestFit sizes={['s', 'm', 'l', 'xl']} content={content} />;
};

Using the test metadata flag

Let's say that we have a requirement to show at least 12 characters of our title per line, unless the title is less than 12 characters. In this case, we can't simply set a blanket min-width style on our title element. The following code can be used to accomplish this, though. It uses an additional h1 to "push" the horizontal :

const MyComponent = ({title, body}) => {
  const content = (size, metadata) => (<div className={`size-${size}`}>
    <h1>{title}</h1>
    <p>some text</p>
    {title &&
      metadata.test && (
        <h1
          style={{
            margin: 0,
            height: 0,
            overflow: 'hidden',
            wordWrap: 'nowrap',
          }}
        >
          {title.slice(0, 12)}
        </h1>
      )}
  </div>);
  return <ReactBestFit sizes={...} content={content} />

The extraneous h1 tag will only appear in the DOM we use to test the sizing, but not the final DOM that gets displayed.

How it works

This component takes a brute-force approach to the problem, which works for simple text-based content. It will create elements for each allowable content size, and, starting from the largest, compare the dimensions to the specified container size. The first size that fits is then displayed to the end user.

This component will style all contained content with position: absolute. This avoids cases where the final content can push out its container (e.g., if you're sizing text within a flexbox element) which can cause render -> resize -> render loops.

Demo

Clone this repo, then:

• yarn install
• yarn demo