react-tailor
v0.3.1
Published
Adjust text size to fit its container.
Downloads
11
Maintainers
Readme
React Tailor ✂️
Tailor adjusts the size of text within its children to try and fit it within the available horizontal and vertical space.
Currently tailor only works (and enforces) a single line of non-wrapping text. This might change in the future, but there are also other solution that work with multiple lines of text (see Similar Projects
below).
Uses React Measure to resize an element only if its size changes.
Install
yarn add react-tailor
Tailor Component
Wrap any child component and calculate its client rect.
Props
canGrow
: boolean
default: false
Can the text size up above its initial size?
minSize
: number
default: 11
The minimum size (in px) that text will be sized down to fit. Once text has reached this size and ellipsis will be added to any text cut off.
Example
import Tailor from 'react-tailor'
class Tailor extends Component {
render() {
return (
<div>
<h1>
<Tailor>Title Text</Tailor>
</h1>
<ul>
<li>
<Tailor>List Item</Tailor>
</li>
<li>
<Tailor>List Item 2</Tailor>
</li>
</ul>
</div>
)
}
}
Running the demo locally
clone repo
git clone [email protected]:chrisdrackett/react-tailor.git
install dependencies
yarn
run dev mode
yarn start
open your browser and visit:
http://localhost:3000/
Similar Projects
similar, but resizes all elements on browser resize even if their parent is the same size. Does not calculate best size automatically.
Supports paragraphs but is heavier.