# react-best-fit

> Size content to fit its container

Latest version **1.1.0** (published 2018-04-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-best-fit
pnpm add react-best-fit
yarn add react-best-fit
bun add react-best-fit
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-04-19 |
| First published | 2018-02-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 193.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mira |
| Maintainers | miratech |

## Links

- npm: https://www.npmjs.com/package/react-best-fit
- Repository: https://github.com/mirainc/react-best-fit
- Homepage: https://github.com/mirainc/react-best-fit#readme
- Issues: https://github.com/mirainc/react-best-fit/issues
- npm.io page: https://npm.io/package/react-best-fit

## Recent versions

- 1.1.0 (latest) — 2018-04-19
- 1.0.1 — 2018-02-21
- 1.0.0 — 2018-02-20

## README

# 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](#how) 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](https://github.com/souporserious/react-measure). Pass the parent's dimensions through to ReactBestFit.

## Example

```jsx
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 :

```jsx
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.

# <a name="how"></a>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`

---
_Source: https://npm.io/package/react-best-fit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._