https://github.com/kennethormandy/react-fittext
FitText.js as a React v16+ component.
https://github.com/kennethormandy/react-fittext
react typography
Last synced: 10 months ago
JSON representation
FitText.js as a React v16+ component.
- Host: GitHub
- URL: https://github.com/kennethormandy/react-fittext
- Owner: kennethormandy
- License: mit
- Created: 2018-05-12T01:41:06.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T13:31:56.000Z (over 3 years ago)
- Last Synced: 2024-12-27T03:08:20.771Z (over 1 year ago)
- Topics: react, typography
- Language: JavaScript
- Homepage: http://react-fittext.kennethormandy.com
- Size: 3.46 MB
- Stars: 70
- Watchers: 2
- Forks: 11
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React FitText
[FitText.js](https://github.com/davatron5000/FitText.js) as a React v16+ component.
If you want to make specific text fit within a container, and then maintain that ratio across screen sizes, this component is for you.
FitText is a particularly useful approach for:
- Predetermined content (ie. not user generated or dynamic)
- Text that fits within a container until it hits a minimum or maximum font size, and then reflows normally from there
- Multi-line text that fits
## Alternatives
If you don’t have any of these requirements, another approach might suit you better. Some possible alternatives include:
- Using a pre-made SVG without outlining the text, if you have predetermined content, and want truly the exact same layout across all viewports
- Using SVG dynamically with [React FitterHappierText](https://github.com/jxnblk/react-fitter-happier-text) (the changes are all [open as Pull Requests](https://github.com/jxnblk/react-fitter-happier-text/pulls) on [Brent Jackson’s original](https://github.com/jxnblk/react-fitter-happier-text))
- Using [BigIdeasText](http://github.com/kennethormandy/big-ideas-text) within React lifecycle hooks like `componentDidMount()`. I may open source a React-specific fork of [Zach Leatherman’s original](https://github.com/zachleat/BigText) in the future.
- Using Mike Riethmuller’s clever [CSS-only fluid type technique](https://www.madebymike.com.au/writing/precise-control-responsive-typography/) and [other examples](https://www.madebymike.com.au/writing/fluid-type-calc-examples/), if you have some scaling constraints but aren’t concerned about reflow across all sizes
- Plain viewport units, if the only relevant container is the width (or height) of the page:
```html
Scale with the viewport
```
```css
/* Minimum font size */
.example {
font-size: 24px;
}
/* Scale linearly after this breakpoint */
@media (min-width: 480px) {
.example {
font-size: 5vw;
}
}
```
If you’re curious why some sort of automatic scaling isn’t already possible using CSS alone, or why it might still be a challenge in the future, [read more in this CSS Working Group drafts issue](https://github.com/w3c/csswg-drafts/issues/2528).
## Differences from the existing React FitText
This component is written specifically for React v16 and up, includes tests, and uses state to avoid DOM manipulation.
The existing [React FitText component by @gianu](https://github.com/gianu/react-fittext) should still work with current versions of React, and is stateless, but manipulates the DOM directly to change font sizes.
The approach I’m using feels more React-appropriate, at least to me. I use this component regularly enough that it made sense for me to maintain my own version regardless.
## Installation
```sh
npm install --save @kennethormandy/react-fittext
```
## Example
```js
import FitText from '@kennethormandy/react-fittext'
```
```jsx
The quick brown fox jumps over the lazy dog.
```
With multiple children:
```jsx
Pangram
The quick brown fox jumps over the lazy dog
```
## Props
### `compressor`
From the original FitText.js documentation:
> If your text is resizing poorly, you'll want to turn tweak up/down “The Compressor.” It works a little like a guitar amp. The default is `1`.
> —[davatron5000](https://github.com/davatron5000/FitText.js)
```jsx
The quick brown fox jumps over the lazy dog.
```
```jsx
The quick brown fox jumps over the lazy dog.
```
```jsx
The quick brown fox jumps over the lazy dog.
```
### `minFontSize` and `maxFontSize`
```jsx
The quick brown fox jumps over the lazy dog.
```
### `debounce`
Change the included debounce resize timeout. How long should React FitText wait before recalculating the `fontSize`?
```jsx
The very slow brown fox
```
The default is `100` milliseconds.
### `defaultFontSize`
React FitText needs the viewport size to determine the size the type, but you might want to provide an explicit fallback when using server-side rendering with React.
```jsx
The quick brown fox
```
The default is `inherit`, so typically you will already have a resonable fallback without using this prop, using CSS only. For example:
```css
.headline {
font-size: 6.25rem;
}
```
```jsx
The quick brown fox
```
## `vertical`
Add the `vertical` prop to scale vertically, rather than horizontally (the default).
```jsx
- Waterfront
- Vancouver City Centre
- Yaletown–Roundhouse
- Olympic Village
- Broadway–City Hall
- King Edward
- Oakridge–41st Avenue
- Langara–49th Avenue
- Marine Drive
```
## `parent`
Use a different parent, other than the immediate `parentNode`, to calculate the vertical height.
```jsx
{dynamicChildren}
```
```jsx
(this.parentNode = el)}>
A contrived example!
{dynamicChildren}
```
## Running locally
```sh
git clone https://github.com/kennethormandy/react-fittext
cd kennethormandy
# Install dependencies
npm install
# Run the project
npm start
```
Now, you can open `http://localhost:8080` and modify `src/dev.js` while working on the project.
To run the Storybook [stories](http://react-fittext.kennethormandy.com) instead:
```sh
npm run storybook
```
## Samples
I’ve used various versions of this project in the following [type specimen sites](https://kennethormandy.com/type-specimen-sites/):
- [Regina Black](http://regina-black.losttype.com)
- [DDC Hardware](https://kennethormandy.com/portfolio/ddc-hardware-type-specimen-site/)
- [Google Fonts + Japanese collection](https://googlefonts.github.io/japanese)
- [Boomville](http://boomville.losttype.com)
- [Tofino v2](http://tofino.losttype.com)
- [My website](https://kennethormandy.com)
- [Protipo](https://protipo.type-together.com)
- TBA
- TBA
Other projects:
- [Cygnus Design Group](https://www.cygnus.group/) (added vertical support)
- Your project? [Add it to the README](https://github.com/kennethormandy/react-fittext/edit/master/README.md)
## Credits
- The original [FitText.js](https://github.com/davatron5000/FitText.js) by [@davatron5000](https://github.com/davatron5000/FitText.js)
- [react-fittext](https://github.com/gianu/react-fittext) by [@gianu](https://github.com/gianu)
## License
[The MIT License (MIT)](LICENSE.md)
Copyright © 2014 [Sergio Rafael Gianazza](https://github.com/gianu/react-fittext/blob/master/LICENSE)
Copyright © 2017–2019 [Kenneth Ormandy Inc.](https://kennethormandy.com)