This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

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

1.0.1 • Public • Published

react-controlled-text · downloads version code style: prettier

Multiline text clamp and scale to fit component for React ⚛️

Available features

  • Resize text to fit within a container
  • Multiline text clamp

Both features are enabled by default (see props below).

Example

Example

Demo

Storybook (https://gr34se.github.io/react-controlled-text)

Usage

import ControlledText from "react-controlled-text";
<div style={{backgroundColor: "lightgreen", width: 200, height: 80, padding: 2}}>
    <ControlledText fontSizeMin={12} fontSizeMax={15} clampSuffix={"..."}>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
        has been the industry's standard dummy text ever since the 1500s, when an unknown
        printer took a galley of, type and scrambled it to make a type specimen book.
    </ControlledText>
</div>

Props

Prop name Type Default Required Note
fontSizeMin number 10 no Minimum font size
fontSizeMax number 16 no Maximum font size
className string "react-controlled-text" no className that output tag will receive
tagName TagName (string) "span" no One of: span, div, p, a, h1, h2, h3, h4, h5, h6
resizeThrottle number 250 no Number of milliseconds to throttle window resize callback
clampSuffix string "..." no String to add at the end of clamped text
disableScaling boolean false no Prop to disable auto-scaling
disableTextClamp boolean false no Prop to disable auto-text-clamping if needed

You can also pass other common HTML props (HTMLAttributes) such as onClick directly to the ControlledText component.

Package Sidebar

Install

npm i react-controlled-text

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

39.8 kB

Total Files

15

Last publish

Collaborators

  • gr34se