rf

react-fitty

React integration with fitty - text fits its parent container

Showing:

Popularity

Downloads/wk

1.3K

GitHub Stars

8

Maintenance

Last Commit

8mos ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

1.7KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

React Fitty

React Fitty Example

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

PropTypeOptionalDescription
minSizenumberMin text size in pixels, default: 16
maxSizenumberMax text size in pixels, max: 512
wrapTextbooleanWrap lines when using minimum font size., default: false
observeMutationsObjectThe 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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100