react-fitty
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    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

    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.

    Install

    npm i react-fitty

    DownloadsWeekly Downloads

    2,418

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    20.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • morhogg