React Fitty

Scales up (or down) text so it fits perfectly to its parent container.

1.5 KB

Ideal for flexible and responsive websites.

Usage

import { ReactFitty } from "react-fitty";

const MyComponent = () => (
    <div>
        <ReactFitty>Text Text Text Text</ReactFitty>
    </div>
)

with Material-UI

import { ReactFitty } from "react-fitty";
import { Typography } from "@material-ui/core"

const MyComponent = () => (
    <div>
        <Typography component={ReactFitty}>Text Text Text</Typography>
    </div>
)

with Styled-Components

import { ReactFitty } from "react-fitty";
import styled from "styled-components";

const TextStyled = styled(ReactFitty)`
    color: red;
    text-decoration: underline;
`;

const MyComponent = () => (
    <div>
        <TextStyled>Text Text Text</TextStyled>
    </div>
)

Props

Prop	Type	Optional	Description
minSize	number	✓	Min text size in pixels, default: 16
maxSize	number	✓	Max text size in pixels, max: 512
wrapText	boolean	✓	Wrap lines when using minimum font size., default: false
observeMutations	Object	✓	The object be will merged with the default react-fitty MutationObserver internal config https://javascript.info/mutation-observer

Development Commands

Run tests in a real browser

yarn ci

Acknowledgements

@rikschennink for having created fitty.