Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-textfit
Advanced tools
npm install react-textfit --save
import { Textfit } from 'react-textfit';
class App extends Component {
render() {
return (
<Textfit mode="single">
Fat headline!
</Textfit>
);
}
}
import { Textfit } from 'react-textfit';
class App extends Component {
render() {
return (
<Textfit
mode="single"
forceSingleModeWidth={false}>
Fat headline!
</Textfit>
);
}
}
import { Textfit } from 'react-textfit';
class App extends Component {
render() {
return (
<Textfit mode="multi">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Textfit>
);
}
}
single
Algorithm steps:
1. binary search to fit the element's width
2. if forceSingleModeWidth=false and text overflows height
2a. binary search to also fit the elements height
3. if perfectFit=true and text still overflows width
3a. decrease font size until text fits element's width
multi
Algorithm steps:
1. binary search to fit the element's height
2. if text overflows width
2a. binary search to also fit the elements width
3. if perfectFit=true and text still overflows height
3a. decrease font size until text fits element's height
<Textfit>
mode
(single|multi) Algorithm to fit the text. Use single for headlines and multi for paragraphs. Default is multi
.forceSingleModeWidth
(Boolean) When mode is single and forceSingleModeWidth is true, the element's height will be ignored. Default is true
.perfectFit
(Boolean) When true, the text will always perfectly fit the element's bounds Default is true
.min
(Number) Minimum font size in pixel. Default is 1
.max
(Number) Maximum font size in pixel. Default is 100
.throttle
(Number) Window resize throttle in milliseconds. Default is 50
.onReady
(Function) Will be called when text is fitted.MIT
FAQs
React component to fit headlines and paragraphs into any element
The npm package react-textfit receives a total of 50,213 weekly downloads. As such, react-textfit popularity was classified as popular.
We found that react-textfit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.