Skip to content

Commit 7b70121

Browse files
scriptcodedscriptcoded
committed
feat: add react fitter component
0 parents  commit 7b70121

18 files changed

+3824
-0
lines changed

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13+
14+
- Configure the top-level `parserOptions` property like this:
15+
16+
```js
17+
export default tseslint.config({
18+
languageOptions: {
19+
// other options...
20+
parserOptions: {
21+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
22+
tsconfigRootDir: import.meta.dirname,
23+
},
24+
},
25+
})
26+
```
27+
28+
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29+
- Optionally add `...tseslint.configs.stylisticTypeChecked`
30+
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31+
32+
```js
33+
// eslint.config.js
34+
import react from 'eslint-plugin-react'
35+
36+
export default tseslint.config({
37+
// Set the react version
38+
settings: { react: { version: '18.3' } },
39+
plugins: {
40+
// Add the react plugin
41+
react,
42+
},
43+
rules: {
44+
// other rules...
45+
// Enable its recommended rules
46+
...react.configs.recommended.rules,
47+
...react.configs['jsx-runtime'].rules,
48+
},
49+
})
50+
```

‎biome.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
3+
"vcs": {
4+
"enabled": false,
5+
"clientKind": "git",
6+
"useIgnoreFile": false
7+
},
8+
"files": {
9+
"ignoreUnknown": false,
10+
"ignore": ["dist"]
11+
},
12+
"formatter": {
13+
"enabled": true,
14+
"indentStyle": "tab"
15+
},
16+
"organizeImports": {
17+
"enabled": true
18+
},
19+
"linter": {
20+
"enabled": true,
21+
"rules": {
22+
"recommended": true
23+
}
24+
},
25+
"javascript": {
26+
"formatter": {
27+
"quoteStyle": "double"
28+
}
29+
}
30+
}

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎lib/Fitter.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { type ReactNode, useEffect, useRef, useState } from "react";
2+
import { useDebounce, useResizeObserver } from "./hooks";
3+
4+
export type FitterProps = {
5+
children: ReactNode;
6+
minSize?: number;
7+
maxLines?: number;
8+
settlePrecision?: number;
9+
updateOnSizeChange?: boolean;
10+
windowResizeDebounce?: number;
11+
};
12+
13+
export const Fitter = ({
14+
children,
15+
minSize = 0.25,
16+
maxLines = 1,
17+
settlePrecision = 0.01,
18+
updateOnSizeChange = true,
19+
windowResizeDebounce = 100,
20+
}: FitterProps) => {
21+
const wrapperRef = useRef<HTMLDivElement>(null);
22+
const textRef = useRef<HTMLSpanElement>(null);
23+
24+
const [size, setSize] = useState(1);
25+
const [settled, setSettled] = useState(false);
26+
const [targetMax, setTargetMax] = useState(1);
27+
28+
useEffect(() => {
29+
if (settled) return;
30+
if (!textRef.current) throw new Error("Could not access wrapper ref");
31+
32+
const lines = textRef.current.getClientRects().length;
33+
34+
const nextShrinkStep = (size - minSize) / 2;
35+
const nextGrowStep = (targetMax - size) / 2;
36+
37+
const nextShrinkSize = size - nextShrinkStep;
38+
const nextGrowSize = size + nextGrowStep;
39+
40+
const wantsToShrink = lines > maxLines;
41+
42+
if (wantsToShrink) {
43+
if (nextShrinkStep < settlePrecision) {
44+
setSettled(true);
45+
return;
46+
}
47+
48+
setTargetMax(size);
49+
setSize(nextShrinkSize);
50+
return;
51+
}
52+
53+
if (nextGrowStep < settlePrecision) {
54+
setSettled(true);
55+
return;
56+
}
57+
58+
setSize(nextGrowSize);
59+
}, [size, maxLines, minSize, targetMax, settlePrecision, settled]);
60+
61+
const start = useDebounce(() => {
62+
setTargetMax(1);
63+
setSettled(false);
64+
}, windowResizeDebounce);
65+
66+
useResizeObserver(wrapperRef, () => start(), updateOnSizeChange);
67+
68+
return (
69+
<div
70+
ref={wrapperRef}
71+
className="react-fitter__wrapper"
72+
style={{
73+
lineHeight: 0,
74+
}}
75+
>
76+
<span
77+
ref={textRef}
78+
style={{
79+
fontSize: `${size * 100}%`,
80+
lineHeight: 1,
81+
}}
82+
className="react-fitter__text"
83+
>
84+
{children}
85+
</span>
86+
</div>
87+
);
88+
};

‎lib/hooks.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import {
2+
type RefObject,
3+
useEffect,
4+
useLayoutEffect,
5+
useMemo,
6+
useRef,
7+
} from "react";
8+
9+
const debounce = (callback: () => void, delay: number) => {
10+
let timeout: NodeJS.Timeout;
11+
return () => {
12+
clearTimeout(timeout);
13+
timeout = setTimeout(callback, delay);
14+
};
15+
};
16+
17+
export const useDebounce = <T extends unknown[], U>(
18+
callback: (...args: T) => U,
19+
delay: number,
20+
) => {
21+
const callbackRef = useRef(callback);
22+
useLayoutEffect(() => {
23+
callbackRef.current = callback;
24+
});
25+
return useMemo(
26+
() => debounce((...args: T) => callbackRef.current(...args), delay),
27+
[delay],
28+
);
29+
};
30+
31+
export const useResizeObserver = (
32+
ref: RefObject<HTMLSpanElement>,
33+
callback: () => void,
34+
enabled: boolean,
35+
) => {
36+
const width = useRef(0);
37+
38+
// biome-ignore lint/correctness/useExhaustiveDependencies: Using a ref as a dependency doesn't work as expected.
39+
useEffect(() => {
40+
if (!ref.current) return;
41+
if (!enabled) return;
42+
43+
const observer = new ResizeObserver((entries) => {
44+
for (const entry of entries) {
45+
// Some older browsers don't return contentBoxSize
46+
const newWidth = entry.contentBoxSize
47+
? entry.contentBoxSize[0].inlineSize
48+
: entry.contentRect.width;
49+
50+
if (newWidth !== width.current) {
51+
width.current = newWidth;
52+
callback();
53+
}
54+
}
55+
});
56+
57+
observer.observe(ref.current);
58+
59+
return () => {
60+
observer.disconnect();
61+
};
62+
}, [enabled]);
63+
};

‎lib/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Fitter.js";

0 commit comments

Comments
 (0)