An ultra lightweight React component that automatically fits text to the size of the element. Works with any added content or styling and includes a host of advanced features...
- Supports single lines or paragraphs
- Add any descendant content or React components
- Optional auto update on resize
- Optional resize update delay
- Supports 'id', 'className', and 'style' props
- Optional min and max font size
> npm install @plutonium-js/react-fit-text
-
In ES6 the code example below imports the Fit Text component.
import FitText from '@plutonium-js/react-fit-text';
Or when using CommonJS...
const {FitText} = require('@plutonium-js/react-fit-text');
-
Add the component directly to a web page.
<script src="https://cdn.jsdelivr.net/npm/@plutonium-js/react-fit-text@1/dist/bundle.js"></script>
To create a basic fit text component add the 'FitText' tag to your JSX.
class App extends Component {
render() {
return (
<FitText>Add your text to fit here.</FitText>
);
}
}Add properties as needed (all properties are optional).
class App extends Component {
render() {
return <FitText
minSize = {20}
maxSize = {200}
updateOnResize = {{
delay:0
}}
id = "myId"
className = "myClassNames"
style = {{
myStyle:'myStyleValue'
}}
>Add your text to fit here.</FitText>;
}
}Min and max size is in pixels. The delay is in milliseconds. The 'id', 'className', and 'style' props are added to the components root element.
The component has a default class name of 'FitText' which can be used to style the root element.
.FitText {position:relative;height:100%;}The 'id', 'className', and 'style' props are added to the components root element.
render() {
return <FitText
id = "myId"
className = "myClassNames"
style = {{
myStyle:'myStyleValue'
}}
>Add your text to fit here.</FitText>;
}Released under the MIT license
Author: Jesse Dalessio / Plutonium.dev