# react-font-size-by-text-length

> Dynamic font size component for ReactJS

Latest version **0.1.0** (published 2022-01-12) · 0 weekly downloads

## Install

```sh
npm install react-font-size-by-text-length
pnpm add react-font-size-by-text-length
yarn add react-font-size-by-text-length
bun add react-font-size-by-text-length
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-01-12 |
| First published | 2022-01-12 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | marvinscheffold |
| Keywords | react dynamic font size, react font size, fontsize, dynamic, change font size, text length, font size by text length, text, fontsize, automatic |

## Links

- npm: https://www.npmjs.com/package/react-font-size-by-text-length
- Repository: https://github.com/marvinscheffold/react-font-size-by-text-length
- Homepage: https://github.com/marvinscheffold/react-font-size-by-text-length#readme
- Issues: https://github.com/marvinscheffold/react-font-size-by-text-length/issues
- npm.io page: https://npm.io/package/react-font-size-by-text-length

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [typescript](https://npm.io/package/typescript.md) ^4.5.4
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.38
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.11

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-01-12

## README

# react-font-size-by-text-length

Dynamic font size component for ReactJS

## Table of Contents

* [Installation](#installation)
* [API documentation](#api-documentation)
* [Examples](#examples)
* [Demos](#demos)

## Installation

To install, you can use [npm](https://npmjs.org/):

    $ npm install --save react-font-size-by-text-length

## API documentation

| Name  |Type | Default | Description |
| ------------- | ------------- | ------------- | ------------- |
| children | ReactElement[] | ReactElement |  | Children or Array of Children which include text, icons or other ReactElements |
| maxPercent  | number  | 100 | Font size for the first char based on outside css rules |
| minPercent  | number | 0  | Specifies at which font size the component should not reduce further |
| changePerChar  | number  |  | How many percent per char should the font size change |
| startAtChar  | number | 0  | When passed string has this length the font size reduction begins  |
| stopAtChar  | number | Infinity  | When passed string has this length the font size reduction ends  |

## Examples

Here are three simple example of react-font-size-by-text-length being used in an app:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import ReactFontSizeByTextLength from 'react-font-size-by-text-length';

function App() {
    const textArray = ["hello", "world"]
  return (
    <>
      // ---- Example One -----
      
      <ReactFontSizeByTextLength changePerChar={10}>
        <span>This text will be smaller</span>
      </ReactFontSizeByTextLength>
      
      <ReactFontSizeByTextLength changePerChar={10}>
        <span>Than this text</span>
      </ReactFontSizeByTextLength>

      // ---- Example Two -----
      
      <ReactFontSizeByTextLength changePerChar={5} startAtChar={2}>
        <span>
          This works 
          <i class="fas fa-check-circle"></i>
        </span>
      </ReactFontSizeByTextLength>


        // ---- Example Three -----

        <ReactFontSizeByTextLength changePerChar={3} minPercent={50}>
            {
                textArray.map((text) =>
                    <span>{text}</span>
            )}
        </ReactFontSizeByTextLength>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
```

## Demos


There is one demo hosted on GitHub which
demonstrate how this component can be used in a calculator app:

* [Calculator App](https://marvinscheffold.github.io/react-calculator/)
* Want to contribute a demo? Make a pull request

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