1.0.1 • Published 3 years ago
react-controlled-text v1.0.1
react-controlled-text · 
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
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.