# react-font-resizer

> Automatically resizes an element's font size to fit inside its parent container.

Latest version **1.0.3** (published 2016-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-font-resizer
pnpm add react-font-resizer
yarn add react-font-resizer
bun add react-font-resizer
```

## 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.0.3 |
| Published | 2016-05-14 |
| First published | 2016-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ericbiewener |
| Keywords | react, input, form, validation |

## Links

- npm: https://www.npmjs.com/package/react-font-resizer
- Repository: https://github.com/ericbiewener/react-font-resizer
- Homepage: https://github.com/ericbiewener/react-font-resizer#readme
- Issues: https://github.com/ericbiewener/react-font-resizer/issues
- npm.io page: https://npm.io/package/react-font-resizer

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2016-05-14
- 1.0.2 — 2016-05-14
- 1.0.1 — 2016-05-13
- 1.0.0 — 2016-05-13

## README

# React Font Resizer
Automatically resizes the font to prevent it from overflowing its container. The font will not increase over its initial size, but it will shrink as much as necessary.

## Installation
`npm install --save react-font-resizer`

## Usage
The DOM hierarchy under a `FontResizer` component may be as complex as you wish, but there must be at least one child element (i.e. the text inside of a `FontResizer` component can not be a direct child text node of the component). 

```js
import FontResizer from 'react-font-resizer'

const MyComponent = ({text}) => (
    <FontResizer>
        <div>{text}</div>
    </FontResizer>
)
```

See the `examples` folder for a working demo.

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