react-fitty

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

Development Commands

Run tests in a real browser

yarn ci

Acknowledgements

@rikschennink for having created fitty.