import Head from "next/head";
import React, { useCallback, useState } from "react";
import useFitText from "use-fit-text";
/**
* Example1 - basic example
*/
function Example1() {
const { fontSize, ref } = useFitText();
return (
<>
Example 1 - basic example
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
);
}
/**
* Example2 - non-wrapping text
*/
function Example2() {
const { fontSize, ref } = useFitText();
return (
<>
Example 2 - non-wrapping text
Lorem ipsum dolor sit amet, consectetur
);
}
/**
* Example3 - demonstrates:
* - recalculating font size on window resize
* - `onStart` and `onFinish` callbacks
*/
function Example3() {
const onStart = useCallback(() => {
console.log("Example 3 resizing started");
}, []);
const onFinish = useCallback((fontSize: number) => {
console.log("Example 3 resizing finished", fontSize);
}, []);
const { fontSize, ref } = useFitText({ maxFontSize: 500, onStart, onFinish });
return (
<>
Example 3 - recalculating on container change
Demonstrates:
- recalculating font size on window resize
-
onStart and{" "}
onFinish callbacks (see log message
in the console)
Lorem ipsum dolor sit amet, consectetur
);
}
/**
* Example4 - recalculating on content change
*/
function Example4() {
const [text, setText] = useState("Lorem ipsum dolor sit amet, consectetur");
const { fontSize, ref } = useFitText();
return (
<>
Example 4 - recalculating on content change
Change the input text and the font size will be updated to fit the text
in the div