or
inside. Instead should directly
236 | // wrap text nodes.
237 | if (
238 | children &&
239 | !Array.isArray(children) &&
240 | typeof children === 'object'
241 | ) {
242 | if (
243 | 'type' in children &&
244 | typeof children.type === 'string' &&
245 | children.type !== 'span'
246 | ) {
247 | console.warn(
248 | ` should not wrap <${children.type}> inside. Instead, it should directly wrap text or inline nodes.
249 |
250 | Try changing this:
251 | <${children.type}>content
252 | To:
253 | <${children.type}>content `
254 | )
255 | }
256 | }
257 | }
258 |
259 | return (
260 | <>
261 |
274 | {children}
275 |
276 | {createScriptElement(
277 | contextValue.hasProvider,
278 | nonce,
279 | `self.${SYMBOL_KEY}("${id}",${ratio})`
280 | )}
281 |
282 | )
283 | }
284 | )
285 |
286 | // As Next.js adds `display: none` to `body` for development, we need to trigger
287 | // a re-balance right after the style is removed, synchronously.
288 | if (!IS_SERVER && process.env.NODE_ENV !== 'production') {
289 | const next_dev_style = document.querySelector(
290 | '[data-next-hide-fouc]'
291 | )
292 | if (next_dev_style) {
293 | const callback: MutationCallback = (mutationList) => {
294 | for (const mutation of mutationList) {
295 | for (const node of Array.from(mutation.removedNodes)) {
296 | if (node !== next_dev_style) continue
297 |
298 | observer.disconnect()
299 | const elements =
300 | document.querySelectorAll('[data-br]')
301 |
302 | for (const element of Array.from(elements)) {
303 | self[SYMBOL_KEY](0, +element.dataset.brr, element)
304 | }
305 | }
306 | }
307 | }
308 | const observer = new MutationObserver(callback)
309 | observer.observe(document.head, { childList: true })
310 | }
311 | }
312 |
313 | export default Balancer
314 | export { Provider, Balancer, BalancerOwnProps }
315 |
--------------------------------------------------------------------------------
/src/utils.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const IS_SERVER = typeof window === 'undefined'
4 | export const useIsomorphicLayoutEffect = IS_SERVER
5 | ? React.useEffect
6 | : React.useLayoutEffect
7 |
8 | let ID = 0
9 | const genId = () => ++ID
10 | let serverHandoffComplete = false
11 |
12 | function useIdPolyfill() {
13 | const [id, setId] = React.useState(serverHandoffComplete ? genId : undefined)
14 |
15 | useIsomorphicLayoutEffect(() => {
16 | if (id === undefined) {
17 | setId(genId())
18 | }
19 |
20 | serverHandoffComplete = true
21 | }, [])
22 |
23 | if (id === undefined) {
24 | return id
25 | }
26 |
27 | return `rwb-${id.toString(32)}`
28 | }
29 |
30 | /**
31 | * A hook for generating unique IDs that are stable across the server and client,
32 | * while avoiding hydration mismatches. Compatible with React 16+ by using
33 | * [React 18's useId](https://reactjs.org/docs/hooks-reference.html#useid) if
34 | * it's available, and a polyfill implementation inspired by
35 | * [@accessible/use-id](https://github.com/accessible-ui/use-id) if it is not.
36 | *
37 | * "rwb-" is hard-coded as a prefix in the polyfill. When using React 18+,
38 | * a prefix can be provided with the `identifierPrefix` option in
39 | * [ReactDOMClient](https://reactjs.org/docs/react-dom-client.html).
40 | */
41 | export function useId() {
42 | const implementation = React.useMemo((): (() => string | number) => {
43 | if ('useId' in React) return React.useId
44 | return useIdPolyfill
45 | }, [])
46 |
47 | return implementation()
48 | }
49 |
--------------------------------------------------------------------------------
/test/benchmark/gen.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs').promises
2 |
3 | function randomTitle() {
4 | const len = Math.floor(Math.random() * 15) + 1
5 | let title = ''
6 | for (let i = 0; i < len; i++) {
7 | title +=
8 | (i ? ' ' : '') +
9 | Array(5)
10 | .fill(0)
11 | .map((_) => String.fromCharCode(Math.floor(Math.random() * 26) + 97))
12 | .join('')
13 | }
14 | return title
15 | }
16 |
17 | async function generateSSRTest() {
18 | const CNT = 1000
19 |
20 | const open = `
21 |
22 |
23 |
24 |
25 |
26 | Document
27 |
28 | `
29 |
30 | const close = `
31 |
32 |
33 | `
34 |
35 | let withBalancer = open
36 | let withoutBalancer = open
37 |
38 | for (let i = 0; i < CNT; i++) {
39 | const title = randomTitle()
40 | const id = `br_${i}`
41 |
42 | withBalancer += `${title}
`
43 |
44 | withoutBalancer += `${title}
`
45 | }
46 |
47 | withBalancer += close
48 | withoutBalancer += close
49 |
50 | await fs.writeFile('ssr-balancer.html', withBalancer)
51 | await fs.writeFile('ssr.html', withoutBalancer)
52 | }
53 |
54 | generateSSRTest()
55 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react",
4 | "moduleResolution": "node",
5 | "esModuleInterop": true,
6 | "lib": ["es2015", "dom"]
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup'
2 |
3 | export default defineConfig({
4 | minify: true,
5 | target: 'es2018',
6 | external: ['react'],
7 | sourcemap: true,
8 | dts: true,
9 | format: ['esm', 'cjs'],
10 | esbuildOptions(options) {
11 | options.banner = {
12 | js: '"use client"',
13 | }
14 | },
15 | })
16 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "extends": ["//"],
4 | "pipeline": {
5 | "build": {
6 | "dependsOn": ["^build"],
7 | "outputs": [".next/**", "dist"]
8 | },
9 | "dev": {
10 | "cache": false
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/website/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next'
2 | import { Analytics } from '@vercel/analytics/react'
3 | import { Inter, Alice } from 'next/font/google'
4 | import React from 'react'
5 | import clsx from 'clsx'
6 | import './style.css'
7 |
8 | const inter = Inter({
9 | weight: 'variable',
10 | subsets: ['latin'],
11 | display: 'block',
12 | })
13 |
14 | const alice = Alice({
15 | weight: '400',
16 | subsets: ['latin'],
17 | variable: '--font-alice',
18 | display: 'block',
19 | })
20 |
21 | const title = 'React Wrap Balancer'
22 | const description = 'Simple React Component That Makes Titles More Readable'
23 | const url = 'https://react-wrap-balancer.vercel.app/'
24 | const ogImage = url + 'og.png'
25 |
26 | const iconSizes = ['32x32', '96x96', '16x16']
27 | const andriodIconSizes = [
28 | '36x36',
29 | '48x48',
30 | '72x72',
31 | '96x96',
32 | '144x144',
33 | '192x192',
34 | ]
35 | const appleIconSizes = [
36 | '57x57',
37 | '60x60',
38 | '72x72',
39 | '76x76',
40 | '114x114',
41 | '120x120',
42 | '144x144',
43 | '152x152',
44 | '180x180',
45 | ]
46 |
47 | export const metadata: Metadata = {
48 | title,
49 | description,
50 | keywords: 'react, wrapping, typography, balance, web',
51 | authors: { name: 'Shu Ding' },
52 | viewport: {
53 | width: 'device-width',
54 | initialScale: 1,
55 | },
56 | openGraph: {
57 | title,
58 | description,
59 | siteName: title,
60 | url,
61 | images: [ogImage],
62 | },
63 | twitter: {
64 | card: 'summary_large_image',
65 | site: '@shuding_',
66 | title,
67 | description,
68 | images: [ogImage],
69 | },
70 | icons: {
71 | shortcut: [
72 | { url: '/favicon.ico', media: '(prefers-color-scheme: light)' },
73 | { url: '/dark-favicon.ico', media: '(prefers-color-scheme: dark)' },
74 | ],
75 | icon: [
76 | ...andriodIconSizes.map((sizes) => ({
77 | type: 'image/png',
78 | sizes,
79 | url: `/android-icon-${sizes}.png`,
80 | media: '(prefers-color-scheme: light)',
81 | })),
82 | ...iconSizes.map((sizes) => ({
83 | type: 'image/png',
84 | sizes,
85 | url: `/favicon-${sizes}.png`,
86 | media: '(prefers-color-scheme: light)',
87 | })),
88 | ...andriodIconSizes.map((sizes) => ({
89 | type: 'image/png',
90 | sizes,
91 | url: `/dark-android-icon-${sizes}.png`,
92 | media: '(prefers-color-scheme: dark)',
93 | })),
94 | ...iconSizes.map((sizes) => ({
95 | type: 'image/png',
96 | sizes,
97 | url: `/dark-favicon-${sizes}.png`,
98 | media: '(prefers-color-scheme: dark)',
99 | })),
100 | ],
101 | apple: [
102 | ...appleIconSizes.map((sizes) => ({
103 | type: 'image/png',
104 | sizes,
105 | url: `/apple-icon-${sizes}.png`,
106 | media: '(prefers-color-scheme: light)',
107 | })),
108 | ...appleIconSizes.map((sizes) => ({
109 | type: 'image/png',
110 | sizes,
111 | url: `/dark-apple-icon-${sizes}.png`,
112 | media: '(prefers-color-scheme: dark)',
113 | })),
114 | ],
115 | },
116 | }
117 |
118 | interface LayoutProps {
119 | children: React.ReactNode
120 | params?: Record
121 | }
122 |
123 | export default function RootLayout({ children }: LayoutProps): JSX.Element {
124 | const bodyClassName = clsx(inter.className, alice.variable)
125 |
126 | return (
127 |
128 |
129 |
130 | {children}
131 |
10 |
11 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/website/app/style.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | box-sizing: border-box;
5 | }
6 |
7 | html,
8 | body {
9 | height: 100%;
10 | }
11 |
12 | p,
13 | h1,
14 | h2 {
15 | word-break: break-word;
16 | }
17 |
18 | body {
19 | margin: 0;
20 | -webkit-font-smoothing: subpixel-antialiased;
21 | color: #222;
22 | background-color: #f5f5f5;
23 | font-feature-settings: 'ss04';
24 | line-height: 1.5;
25 | --w0: 320px;
26 | --w1: min(27.5vw, 480px);
27 | }
28 |
29 | .logo-container {
30 | display: flex;
31 | justify-content: center;
32 | margin-top: 40px;
33 | }
34 |
35 | .logo {
36 | display: inline-block;
37 | border: 5px solid currentColor;
38 | padding: 0 6px 0 4px;
39 | font-weight: 700;
40 | font-size: 30px;
41 | letter-spacing: -0.021em;
42 | line-height: 34px;
43 | margin: 0;
44 | user-select: none;
45 | border-radius: 7px;
46 | align-self: center;
47 | text-decoration: none;
48 | mask-image: linear-gradient(
49 | 45deg,
50 | black 25%,
51 | rgba(0, 0, 0, 0.2) 50%,
52 | black 75%
53 | );
54 | mask-size: 800%;
55 | mask-position: 0%;
56 | }
57 |
58 | .headline {
59 | text-align: center;
60 | font-family: var(--font-alice);
61 | margin: 80px 0 50px;
62 | font-size: 26px;
63 | letter-spacing: -0.04rem;
64 | line-height: 1.45;
65 | }
66 |
67 | .github-link {
68 | display: inline-flex;
69 | align-items: center;
70 | margin: 0.8em 0;
71 | font-size: 14px;
72 | gap: 0.3em;
73 | user-select: none;
74 | }
75 | .github-link span {
76 | display: inline-flex;
77 | align-items: center;
78 | gap: 0.2em;
79 | white-space: nowrap;
80 | }
81 |
82 | .installation {
83 | cursor: copy;
84 | transition: all 0.2s ease;
85 | }
86 |
87 | .installation:hover {
88 | background-color: #ffffffaa;
89 | }
90 | .installation:active .copy {
91 | opacity: 0.2;
92 | }
93 |
94 | .copy {
95 | position: absolute;
96 | right: 8.6px;
97 | width: 2em;
98 | height: 2em;
99 | border-radius: 1em;
100 | background-color: #f5f5f5;
101 | display: flex;
102 | align-items: center;
103 | justify-content: center;
104 | top: 0;
105 | bottom: 0;
106 | margin: auto;
107 | transition: all 0.1s ease;
108 | }
109 |
110 | .copy svg {
111 | animation: fadein 0.5s ease forwards;
112 | }
113 |
114 | @keyframes fadein {
115 | 0% {
116 | opacity: 0;
117 | }
118 | 100% {
119 | opacity: 1;
120 | }
121 | }
122 |
123 | h3 {
124 | text-align: center;
125 | font-family: var(--font-alice);
126 | margin: 30px 0 80px;
127 | color: #888;
128 | font-weight: 400;
129 | }
130 |
131 | h3 > span::before {
132 | content: '';
133 | width: 0;
134 | height: 0;
135 | border-left: 0.35em solid transparent;
136 | border-right: 0.35em solid transparent;
137 | border-bottom: 0.6em solid currentColor;
138 | display: inline-block;
139 | margin-right: 0.4em;
140 | }
141 |
142 | h3 + .headline {
143 | margin-top: 10px;
144 | }
145 |
146 | a {
147 | color: inherit;
148 | text-decoration: underline;
149 | text-decoration-thickness: from-font;
150 | text-underline-position: from-font;
151 | transition: opacity 0.2s ease;
152 | }
153 |
154 | a:hover {
155 | opacity: 0.6;
156 | }
157 | a.logo:hover {
158 | transition: mask-position 2s ease, -webkit-mask-position 2s ease;
159 | mask-position: 120%;
160 | opacity: 1;
161 | }
162 |
163 | main {
164 | display: flex;
165 | flex-direction: column;
166 | align-items: center;
167 | padding: 40px 20px;
168 | margin: 0 auto;
169 | max-width: 1800px;
170 | }
171 |
172 | main > * {
173 | width: 100%;
174 | max-width: 600px;
175 | }
176 |
177 | label {
178 | font-weight: 500;
179 | text-transform: uppercase;
180 | font-size: 12px;
181 | display: block;
182 | letter-spacing: 0.04rem;
183 | margin: 1.5em 0 8px;
184 | color: #888;
185 | user-select: none;
186 | }
187 |
188 | code,
189 | .code {
190 | font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas,
191 | monospace;
192 | }
193 | code {
194 | position: relative;
195 | background: #fff;
196 | display: block;
197 | border-radius: 6px;
198 | padding: 10px 12px;
199 | font-size: 14px;
200 | line-height: 1.75;
201 | margin: 8px 0 1.5em;
202 | white-space: pre-wrap;
203 | letter-spacing: 0;
204 | }
205 | code:last-child {
206 | margin-bottom: 0;
207 | }
208 | .code {
209 | font-size: 0.92em;
210 | letter-spacing: 0;
211 | }
212 | code .hl-fade {
213 | color: #888;
214 | }
215 | code .hl-highlighted {
216 | --color: rgba(0, 0, 0, 0.04);
217 | background: var(--color);
218 | box-shadow: 0 0 0 3px var(--color);
219 | border-radius: 2px;
220 | }
221 |
222 | p,
223 | .p {
224 | font-size: 15px;
225 | line-height: 1.8;
226 | margin: 0 0 1.5em;
227 | letter-spacing: -0.01em;
228 | }
229 |
230 | .controller {
231 | position: relative;
232 | align-self: center;
233 | display: flex;
234 | align-items: center;
235 | width: auto;
236 | height: 32px;
237 | padding: 5px 10px;
238 | font-size: 15px;
239 | background-color: #fff;
240 | border-top-left-radius: 10px;
241 | border-top-right-radius: 10px;
242 | user-select: none;
243 | }
244 |
245 | .controller::before {
246 | content: '';
247 | display: block;
248 | width: 20px;
249 | height: 20px;
250 | position: absolute;
251 | background-color: transparent;
252 | border-bottom: 10px solid white;
253 | border-right: 10px solid white;
254 | border-bottom-right-radius: 20px;
255 | left: -10px;
256 | bottom: -10px;
257 | clip-path: inset(0 10px 10px 0);
258 | }
259 |
260 | .controller::after {
261 | content: '';
262 | display: block;
263 | width: 20px;
264 | height: 20px;
265 | position: absolute;
266 | background-color: transparent;
267 | border-bottom: 10px solid white;
268 | border-left: 10px solid white;
269 | border-bottom-left-radius: 20px;
270 | right: -10px;
271 | bottom: -10px;
272 | clip-path: inset(0 0 10px 10px);
273 | }
274 |
275 | .controller input {
276 | appearance: none;
277 | background: #dedede;
278 | height: 3px;
279 | border-radius: 3px;
280 | }
281 |
282 | .demo-container {
283 | max-width: unset;
284 | display: flex;
285 | flex-direction: column;
286 | align-items: center;
287 | }
288 |
289 | .demo {
290 | display: flex;
291 | gap: 20px;
292 | padding: 20px;
293 | background-color: #fff;
294 | border-radius: 10px;
295 | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 8%), 0 3px 10px -6px rgb(0 0 0 / 10%);
296 | }
297 |
298 | .demo > div {
299 | flex: 1;
300 | }
301 |
302 | .demo .item {
303 | border: 1px dashed transparent;
304 | border-radius: 2px;
305 | transition: border-color 0.5s ease;
306 | }
307 |
308 | .demo legend {
309 | font-size: 13px;
310 | margin-bottom: 5px;
311 | padding: 0;
312 | text-align: left;
313 | color: #888;
314 | user-select: none;
315 | }
316 |
317 | h2 {
318 | margin: 10px 0 0;
319 | font-size: 22px;
320 | }
321 |
322 | .skeleton {
323 | display: inline-block;
324 | width: var(--w);
325 | height: 24px;
326 | margin-top: 24px;
327 | border-radius: 4px;
328 | background-color: #f5f5f5;
329 | }
330 | .skeleton + .skeleton {
331 | margin-top: 12px;
332 | }
333 | .skeleton:last-child {
334 | margin-bottom: 10px;
335 | }
336 |
337 | .tooltip-container {
338 | position: relative;
339 | }
340 | .TooltipContent {
341 | position: absolute;
342 | left: 50%;
343 | transform: translate3d(-50%, -10px, 0);
344 | margin: auto;
345 | bottom: 100%;
346 | border-radius: 9px;
347 | padding: 10px;
348 | line-height: 1;
349 | background-color: white;
350 | box-shadow: 0 1px 5px #0000000f, 0 5px 20px #00000017;
351 | font-size: 14px;
352 | user-select: none;
353 | }
354 | .TooltipArrow {
355 | fill: white;
356 | position: absolute;
357 | left: 0;
358 | right: 0;
359 | top: 100%;
360 | margin: auto;
361 | }
362 |
363 | .tooltip-trigger {
364 | margin-top: 120px;
365 | margin-bottom: 10px;
366 | padding: 4px;
367 | text-align: center;
368 | font-size: 14px;
369 | }
370 | .tooltip {
371 | line-height: 1.5;
372 | text-align: center;
373 | }
374 |
375 | .controller:active + .demo .item {
376 | border-color: #229dff;
377 | }
378 |
379 | blockquote::before {
380 | content: '“';
381 | display: block;
382 | font-size: 80px;
383 | text-align: center;
384 | color: #ddd;
385 | margin-bottom: -40px;
386 | }
387 |
388 | blockquote {
389 | line-height: 1.65;
390 | display: flex;
391 | flex-direction: column;
392 | align-items: center;
393 | font-family: var(--font-alice);
394 | margin: 0 0 20px;
395 | font-size: 15px;
396 | }
397 |
398 | ul {
399 | margin: 0;
400 | padding-left: 18px;
401 | }
402 |
403 | h2.ratio-title {
404 | position: relative;
405 | margin-bottom: 1em;
406 | background: #fff2e0;
407 | border-right: 1px dashed #c59759;
408 | border-left: 1px dashed #c59759;
409 | }
410 | h2.ratio-title span {
411 | background: #cdebff;
412 | }
413 | h2.ratio-title:after,
414 | h2.ratio-ruler span:after {
415 | content: '0';
416 | position: absolute;
417 | top: 100%;
418 | left: 0;
419 | font-size: 11px;
420 | transform: translateX(-50%);
421 | margin-top: 2px;
422 | margin-left: -1px;
423 | font-weight: 400;
424 | }
425 | h2.ratio-ruler {
426 | margin-top: 0;
427 | position: absolute;
428 | width: 100%;
429 | user-select: none;
430 | pointer-events: none;
431 | z-index: 1;
432 | }
433 | h2.ratio-ruler > span {
434 | position: relative;
435 | border-right: 1px dashed #2d76a7;
436 | border-left: 1px dashed #2d76a7;
437 | }
438 | h2.ratio-ruler span span {
439 | color: transparent;
440 | }
441 | h2.ratio-ruler span:after {
442 | content: '1';
443 | }
444 |
445 | .benchmark {
446 | display: flex;
447 | padding: 20px 16px;
448 | box-sizing: border-box;
449 | width: calc(100vw - 32px);
450 | max-width: 700px;
451 | background-color: white;
452 | border-radius: 6px;
453 | margin: 0 0 1.5em 0;
454 | }
455 |
456 | .benchmark img {
457 | width: 100%;
458 | }
459 |
460 | /* Mobile */
461 | @media screen and (max-width: 640px) {
462 | .demo {
463 | flex-direction: column;
464 | }
465 | body {
466 | --w0: 200px;
467 | --w1: 80vw;
468 | }
469 | .demo-container {
470 | flex-direction: column-reverse;
471 | }
472 | .controller {
473 | position: sticky;
474 | z-index: 1;
475 | bottom: 25px;
476 | margin-top: 15px;
477 | border: 1px solid #e5e5e5;
478 | border-radius: 20px;
479 | box-shadow: 0 5px 10px rgb(0 0 0 / 4%);
480 | backdrop-filter: blur(10px);
481 | background: rgb(255 255 255 / 83%);
482 | }
483 | .controller::before,
484 | .controller::after {
485 | display: none;
486 | }
487 | blockquote {
488 | font-size: 15px;
489 | }
490 | h2 {
491 | font-size: 20px;
492 | }
493 | h3 {
494 | font-size: 16px;
495 | }
496 | .headline {
497 | font-size: 22px;
498 | }
499 | .TooltipContent {
500 | font-size: 10px;
501 | }
502 | h2.ratio-ruler,
503 | h2.ratio-title {
504 | font-size: 22px;
505 | }
506 | }
507 |
508 | @media screen and (max-width: 450px) {
509 | h2.ratio-ruler,
510 | h2.ratio-title {
511 | font-size: 18px;
512 | }
513 | }
514 |
515 | @media screen and (max-width: 390px) {
516 | h2.ratio-ruler,
517 | h2.ratio-title {
518 | font-size: 16px;
519 | }
520 | }
521 |
--------------------------------------------------------------------------------
/website/css.d.ts:
--------------------------------------------------------------------------------
1 | import * as CSS from 'csstype'
2 |
3 | declare module 'csstype' {
4 | interface Properties {
5 | '--w'?: CSS.Property.Width
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/website/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// = (event) => {
21 | api.start({ width: +event.target.value / 100 })
22 | }
23 |
24 | return (
25 |
26 |
27 |
28 |
29 |
30 |
42 | }) {
43 | if (typeof a !== typeof b) return null
44 |
45 | let interpolation: Interpolation
46 |
47 | if (typeof a === 'function') {
48 | interpolation = width.to(
49 | (v) => `calc(${v} * var(--w1) + ${150 * (1 - v) - 31 * v}px)`
50 | )
51 |
52 | return (
53 |
57 | {renderAB(a(interpolation), b(interpolation))}
58 |
59 | )
60 | }
61 |
62 | interpolation = width.to((v) => `calc(${v * 100}% + ${1 - v} * var(--w0))`)
63 |
64 | return (
65 |
69 | {renderAB(a, b)}
70 |
71 | )
72 | }
73 |
74 | const renderAB = (a: JSX.Element, b: JSX.Element) => (
75 | <>
76 |
77 |
78 | {a}
79 |
80 |
81 |
82 | {b}
83 |
84 |
85 | )
86 |
--------------------------------------------------------------------------------
/website/src/components/Content.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const content = (
4 | <>
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export type ContentProps =
12 | (T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : never) & {
13 | as?: T
14 | children?: React.ReactNode
15 | }
16 |
17 | export default function Content({
18 | as,
19 | children,
20 | ...props
21 | }: ContentProps) {
22 | if (as) {
23 | return React.createElement(as, props, children, content)
24 | }
25 |
26 | return (
27 |
28 | {children}
29 | {content}
30 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/website/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as BlankLink } from './BlankLink'
2 | export { default as Comparison } from './Comparison'
3 | export { default as Content } from './Content'
4 |
--------------------------------------------------------------------------------
/website/src/icons/Copy.tsx:
--------------------------------------------------------------------------------
1 | export default function Copy({
2 | copying = false,
3 | ...svgProps
4 | }: React.SVGProps & {
5 | copying?: boolean
6 | }) {
7 | const props: React.SVGProps = {
8 | width: 15,
9 | height: 15,
10 | viewBox: '0 0 15 15',
11 | fill: 'none',
12 | xmlns: 'http://www.w3.org/2000/svg',
13 | ...svgProps,
14 | }
15 |
16 | if (copying) {
17 | return (
18 |
26 | )
27 | }
28 |
29 | return (
30 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/website/src/icons/GitHub.tsx:
--------------------------------------------------------------------------------
1 | export default function GitHub(svgProps: React.SVGProps) {
2 | const props: React.SVGProps = {
3 | viewBox: '0 0 15 15',
4 | fill: 'none',
5 | xmlns: 'http://www.w3.org/2000/svg',
6 | ...svgProps,
7 | }
8 |
9 | return (
10 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/website/src/icons/TooltipArrow.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 |
3 | export default function TooltipArrow(svgProps: React.SVGProps) {
4 | const props: React.SVGProps = {
5 | width: 10,
6 | height: 5,
7 | preserveAspectRatio: 'none',
8 | viewBox: '0 0 30 10',
9 | ...svgProps,
10 | className: clsx('TooltipArrow', svgProps.className),
11 | }
12 |
13 | return (
14 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/website/src/icons/TooltipTrigger.tsx:
--------------------------------------------------------------------------------
1 | export default function TooltipTrigger(
2 | svgProps: React.SVGProps
3 | ) {
4 | const props: React.SVGProps = {
5 | width: 16,
6 | fill: 'currentColor',
7 | viewBox: '0 0 20 20',
8 | xmlns: 'http://www.w3.org/2000/svg',
9 | ...svgProps,
10 | }
11 |
12 | return (
13 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/website/src/icons/Vercel.tsx:
--------------------------------------------------------------------------------
1 | export default function Vercel(props: React.SVGProps) {
2 | return (
3 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/website/src/icons/index.ts:
--------------------------------------------------------------------------------
1 | export { default as CopyIcon } from './Copy'
2 | export { default as GitHubIcon } from './GitHub'
3 | export { default as TooltipArrowIcon } from './TooltipArrow'
4 | export { default as TooltipTriggerIcon } from './TooltipTrigger'
5 | export { default as VercelIcon } from './Vercel'
6 |
--------------------------------------------------------------------------------
/website/src/sections/About.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import Balancer from 'react-wrap-balancer'
4 |
5 | import BlankLink from '../components/BlankLink'
6 |
7 | export default function About() {
8 | return (
9 | <>
10 |
11 | About React Wrap Balancer
12 |
13 |
21 |
22 | This project was inspired by Adobe’s{' '}
23 |
24 | balance-text
25 | {' '}
26 | project, NYT’s{' '}
27 |
28 | text-balancer
29 | {' '}
30 | project, and Daniel Aleksandersen’s{' '}
31 |
32 | Improving the New York Times’ line wrap balancer
33 |
34 | . If you want to learn more, you can also take a look at the{' '}
35 |
36 |
37 | text-wrap: balance
38 |
39 | {' '}
40 | proposal.
41 |
42 |
43 |
44 |
45 | Special thanks to{' '}
46 |
47 | Emil Kowalski
48 | {' '}
49 | for testing and feedback. Created by{' '}
50 | Shu Ding in
51 | 2022, released under the MIT license.
52 |
53 |
54 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/website/src/sections/CustomBalanceRatio.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useSpring } from '@react-spring/web'
4 | import { useState } from 'react'
5 | import Balancer from 'react-wrap-balancer'
6 | import { BlankLink } from '../components'
7 |
8 | export default function CustomBalanceRatio() {
9 | const [ratio, setRatio] = useState(0.65)
10 | const [currentRatio, setCurrentRatio] = useState(0.65)
11 |
12 | const handleRange: React.ChangeEventHandler = (event) => {
13 | setRatio(+event.target.value / 100)
14 | }
15 |
16 | useSpring({
17 | from: { r: 0.65 },
18 | to: { r: ratio },
19 | onChange(prop) {
20 | setCurrentRatio(prop.value.r)
21 | },
22 | })
23 |
24 | return (
25 | <>
26 |
27 | Custom Balance Ratio
28 |
29 |
30 |
31 |
32 |
33 |
34 |
40 |
41 |
42 |
43 | The quick brown fox jumps over the lazy dog
44 |
45 |
46 |
47 |
48 | The quick brown fox jumps over the lazy dog
49 |
50 |
51 | {``}
54 |
55 |
56 |
57 |
58 |
59 |
60 | Adjust the balance ratio to a custom value between{' '}
61 | 0 (loose) and{' '}
62 | 1 (compact, the default)
63 |
64 |
65 |
70 |
88 | Note that if the native CSS balance (
89 |
90 | text-wrap: balance
91 |
92 | ) is available, React Wrap Balancer will use it instead. And the `ratio`
93 | option will be ignored in that case. You can provide the `preferNative`
94 | option to opt out.
95 |
96 |
97 | )
98 | }
99 |
--------------------------------------------------------------------------------
/website/src/sections/Footer.tsx:
--------------------------------------------------------------------------------
1 | import BlankLink from '../components/BlankLink'
2 | import VercelIcon from '../icons/Vercel'
3 |
4 | export default function Footer() {
5 | return (
6 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/website/src/sections/GettingStarted.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useRef, useState } from 'react'
4 | import Balancer from 'react-wrap-balancer'
5 | import copy from 'copy-to-clipboard'
6 |
7 | import BlankLink from '../components/BlankLink'
8 | import CopyIcon from '../icons/Copy'
9 | import GitHubIcon from '../icons/GitHub'
10 |
11 | // Quick and dirty monochrome code highlighter via string templates, don't use this.
12 | function highlightedCode(
13 | fades: TemplateStringsArray,
14 | ...highlighted: string[]
15 | ) {
16 | const elements: JSX.Element[] = []
17 | let i = 0
18 |
19 | for (const fade of fades) {
20 | elements.push(
21 |
22 | {fade}
23 |
24 | )
25 | if (highlighted.length) {
26 | elements.push(
27 |
28 | {highlighted.shift()}
29 |
30 | )
31 | }
32 | }
33 |
34 | return elements
35 | }
36 |
37 | export default function GettingStarted() {
38 | const [copying, setCopying] = useState(0)
39 | const pointerPos = useRef>({ x: -1, y: -1 })
40 |
41 | const handlePointerMove: React.MouseEventHandler = (event) => {
42 | pointerPos.current.x = event.clientX
43 | pointerPos.current.y = event.clientY
44 | }
45 |
46 | const handleCopy: React.MouseEventHandler = (event) => {
47 | let text = 'npm install react-wrap-balancer'
48 |
49 | // Only copy the selected text if the pointer is moved
50 | if (
51 | Math.abs(event.clientX - pointerPos.current.x) > 5 ||
52 | Math.abs(event.clientY - pointerPos.current.y) > 5
53 | ) {
54 | text = window.getSelection().toString()
55 | if (!text) return
56 | }
57 |
58 | copy(text)
59 | setCopying((c) => c + 1)
60 | setTimeout(() => {
61 | setCopying((c) => c - 1)
62 | }, 2000)
63 | }
64 |
65 | return (
66 | <>
67 |
68 | Getting Started
69 |
70 |
71 |
72 |
77 | npm install react-wrap-balancer
78 |
79 | 0} />
80 |
81 |
82 |
83 |
84 |
85 |
86 | The simplest way is to wrap the text content with{' '}
87 | {``} :
88 |
89 |
90 | {highlightedCode`import ${'Balancer'} from ${"'react-wrap-balancer'"}\n\n// ...\n\n\n ${'My Title '}\n
`}
91 |
92 |
93 | If you have multiple {``} {' '}
94 | components used, it’s recommended (but optional) to use{' '}
95 | {``} to wrap the entire app.
96 | This will make them share the re-balance logic and reduce the HTML
97 | size:
98 |
99 |
100 | {highlightedCode`import { ${'Provider'} } from ${"'react-wrap-balancer'"}\n\n// ...\n\n${''}\n '}`}
101 |
102 |
103 |
104 |
105 |
106 | - 1 kB Gzipped
107 | - Fast O(log n) algorithm
108 | -
109 | Doesn’t cause{' '}
110 |
layout shifts
111 |
112 | - Works perfectly with web fonts
113 | -
114 | SSR and{' '}
115 |
116 | streaming SSR
117 | {' '}
118 | supported
119 |
120 | -
121 | Switches to native CSS{' '}
122 |
123 | text-wrap: balance
124 | {' '}
125 | if available
126 |
127 | -
128 |
129 | Next.js 13 app directory and React Server Components
130 | {' '}
131 | compatible
132 |
133 |
134 |
135 |
136 |
137 | This library requires React ≥ 16.8.0, and IE 11 is not supported.
138 |
139 |
140 |
144 | View project on
145 |
146 |
150 |
151 |
152 | )
153 | }
154 |
--------------------------------------------------------------------------------
/website/src/sections/Header.tsx:
--------------------------------------------------------------------------------
1 | import BlankLink from '../components/BlankLink'
2 |
3 | export default function Header() {
4 | return (
5 |
6 |
10 | React
11 |
12 | Wrap
13 |
14 | Balancer
15 |
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/website/src/sections/Hero.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import Balancer from 'react-wrap-balancer'
4 |
5 | import Comparison from '../components/Comparison'
6 | import Content from '../components/Content'
7 |
8 | export default function HeroSection() {
9 | return (
10 | <>
11 |
12 |
13 | Simple React Component That Makes Titles More Readable
14 |
15 |
16 |
20 | React: A JavaScript library for building user interfaces
21 |
22 | }
23 | b={
24 |
25 |
26 |
27 | React: A JavaScript library for building user interfaces
28 |
29 |
30 |
31 | }
32 | />
33 |
34 |
35 | React Wrap Balancer avoids single hanging word on the last line
36 |
37 |
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/website/src/sections/HowItWorks.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import Balancer from 'react-wrap-balancer'
4 |
5 | import BlankLink from '../components/BlankLink'
6 |
7 | export default function HowItWorks() {
8 | return (
9 | <>
10 |
11 | How Does It Work?
12 |
13 |
14 | React Wrap Balancer reduces the width of the content wrapper as much as
15 | it could, before causing an extra line break. When reaching the minimum
16 | width, each line will approximately have the same width, and look more
17 | compact and balanced.
18 |
19 |
20 | Check out the{' '}
21 |
22 | GitHub Repository
23 | {' '}
24 | to learn more.
25 |
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/website/src/sections/Performance.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import Balancer from 'react-wrap-balancer'
4 |
5 | import BlankLink from '../components/BlankLink'
6 |
7 | export default function Performance() {
8 | return (
9 | <>
10 |
11 | Performance Impact
12 |
13 |
19 | It is worth to mention that this project is a workaround for the lack of
20 | native support for balanced text wrapping in CSS. It is not perfect as
21 | it adds some performance overhead. However, the performance impact is
22 | usually very trivial and can be ignored in most cases.
23 |
24 |
30 | The following benchmark (
31 |
32 | source
33 |
34 | ) is done by measuring the script execution time of X balanced titles
35 | when loading the webpage (
36 |
37 | raw data
38 |
39 | ):
40 |
41 |
42 | 
43 |
44 |
50 | It shows that when there are less than 100 elements with React Wrap
51 | Balancer in the initial HTML, the per-element impact to the page load
52 | time is less than 0.25 ms. When there are 1,000 elements, that number
53 | increases to ~1 ms. When there are 5,000 elements, the per-element
54 | script execution time becomes ~7 ms.
55 |
56 |
62 | These numbers don’t scale linearly because re-layouts usually have
63 | an impact to other elements on the page. Hence the best practice is to
64 | only use this library for title elements when necessary, or use it for
65 | content that is behind user interactions (e.g. tooltips), to avoid
66 | negative impacts to the page performance.
67 |
68 |
69 | )
70 | }
71 |
--------------------------------------------------------------------------------
/website/src/sections/UseCases.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { animated } from '@react-spring/web'
4 | import Balancer from 'react-wrap-balancer'
5 |
6 | import Comparison from '../components/Comparison'
7 | import Content from '../components/Content'
8 | import TooltipArrowIcon from '../icons/TooltipArrow'
9 | import TooltipTriggerIcon from '../icons/TooltipTrigger'
10 |
11 | export default function UseCases() {
12 | return (
13 | <>
14 |
15 | Use Cases
16 |
17 | (
19 |
20 |
21 |
22 |
23 | This deployment is currently in progress. Read more.
24 |
25 |
26 |
37 |
38 |
39 | This deployment is currently in progress. Read more.
40 |
41 |
42 |
43 |
52 | Useful in tooltips and other UI components
53 |
54 |
57 |
58 | 第六個沉思：論物質性東西的存在；論人的靈魂和肉體之間的實在區別
59 |
60 |
61 | }
62 | b={
63 |
64 |
65 |
66 | 第六個沉思：論物質性東西的存在；論人的靈魂和肉體之間的實在區別
67 |
68 |
69 |
70 | }
71 | />
72 |
73 | Left aligned, non-latin content
74 |
75 |
78 |
79 | You have wakened not out of sleep, but into a prior dream, and
80 | that dream lies within another, and so on, to infinity, which is
81 | the number of grains of sand. The path that you are to take is
82 | endless, and you will die before you have truly awakened.
83 |
84 |
- Jorge Luis Borges
85 |
86 | }
87 | b={
88 |
89 |
90 | You have wakened not out of sleep, but into a prior dream, and
91 | that dream lies within another, and so on, to infinity, which is
92 | the number of grains of sand. The path that you are to take is
93 | endless, and you will die before you have truly awakened.
94 |
95 |
- Jorge Luis Borges
96 |
97 | }
98 | />
99 |
100 |
101 | Makes multi-line content more compact with fewer visual changes when
102 | resizing
103 |
104 |
105 |
106 | )
107 | }
108 |
--------------------------------------------------------------------------------
/website/src/sections/index.ts:
--------------------------------------------------------------------------------
1 | import { default as About } from './About'
2 | import { default as CustomBalanceRatio } from './CustomBalanceRatio'
3 | import { default as GettingStarted } from './GettingStarted'
4 | import { default as Header } from './Header'
5 | import { default as Footer } from './Footer'
6 | import { default as Hero } from './Hero'
7 | import { default as HowItWorks } from './HowItWorks'
8 | import { default as Performance } from './Performance'
9 | import { default as UseCases } from './UseCases'
10 | export {
11 | About,
12 | CustomBalanceRatio,
13 | GettingStarted,
14 | Header,
15 | Footer,
16 | Hero,
17 | HowItWorks,
18 | Performance,
19 | UseCases,
20 | }
21 | const Sections = {
22 | About,
23 | CustomBalanceRatio,
24 | GettingStarted,
25 | Header,
26 | Footer,
27 | Hero,
28 | HowItWorks,
29 | Performance,
30 | UseCases,
31 | } as const
32 |
33 | export default Sections
34 |
--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": false,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "incremental": true,
11 | "esModuleInterop": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "jsx": "preserve",
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ]
22 | },
23 | "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
24 | "exclude": ["node_modules"]
25 | }
26 |
--------------------------------------------------------------------------------
${title}
` 43 | 44 | withoutBalancer += `${title}
` 45 | } 46 | 47 | withBalancer += close 48 | withoutBalancer += close 49 | 50 | await fs.writeFile('ssr-balancer.html', withBalancer) 51 | await fs.writeFile('ssr.html', withoutBalancer) 52 | } 53 | 54 | generateSSRTest() 55 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react", 4 | "moduleResolution": "node", 5 | "esModuleInterop": true, 6 | "lib": ["es2015", "dom"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | 3 | export default defineConfig({ 4 | minify: true, 5 | target: 'es2018', 6 | external: ['react'], 7 | sourcemap: true, 8 | dts: true, 9 | format: ['esm', 'cjs'], 10 | esbuildOptions(options) { 11 | options.banner = { 12 | js: '"use client"', 13 | } 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "extends": ["//"], 4 | "pipeline": { 5 | "build": { 6 | "dependsOn": ["^build"], 7 | "outputs": [".next/**", "dist"] 8 | }, 9 | "dev": { 10 | "cache": false 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /website/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | import { Analytics } from '@vercel/analytics/react' 3 | import { Inter, Alice } from 'next/font/google' 4 | import React from 'react' 5 | import clsx from 'clsx' 6 | import './style.css' 7 | 8 | const inter = Inter({ 9 | weight: 'variable', 10 | subsets: ['latin'], 11 | display: 'block', 12 | }) 13 | 14 | const alice = Alice({ 15 | weight: '400', 16 | subsets: ['latin'], 17 | variable: '--font-alice', 18 | display: 'block', 19 | }) 20 | 21 | const title = 'React Wrap Balancer' 22 | const description = 'Simple React Component That Makes Titles More Readable' 23 | const url = 'https://react-wrap-balancer.vercel.app/' 24 | const ogImage = url + 'og.png' 25 | 26 | const iconSizes = ['32x32', '96x96', '16x16'] 27 | const andriodIconSizes = [ 28 | '36x36', 29 | '48x48', 30 | '72x72', 31 | '96x96', 32 | '144x144', 33 | '192x192', 34 | ] 35 | const appleIconSizes = [ 36 | '57x57', 37 | '60x60', 38 | '72x72', 39 | '76x76', 40 | '114x114', 41 | '120x120', 42 | '144x144', 43 | '152x152', 44 | '180x180', 45 | ] 46 | 47 | export const metadata: Metadata = { 48 | title, 49 | description, 50 | keywords: 'react, wrapping, typography, balance, web', 51 | authors: { name: 'Shu Ding' }, 52 | viewport: { 53 | width: 'device-width', 54 | initialScale: 1, 55 | }, 56 | openGraph: { 57 | title, 58 | description, 59 | siteName: title, 60 | url, 61 | images: [ogImage], 62 | }, 63 | twitter: { 64 | card: 'summary_large_image', 65 | site: '@shuding_', 66 | title, 67 | description, 68 | images: [ogImage], 69 | }, 70 | icons: { 71 | shortcut: [ 72 | { url: '/favicon.ico', media: '(prefers-color-scheme: light)' }, 73 | { url: '/dark-favicon.ico', media: '(prefers-color-scheme: dark)' }, 74 | ], 75 | icon: [ 76 | ...andriodIconSizes.map((sizes) => ({ 77 | type: 'image/png', 78 | sizes, 79 | url: `/android-icon-${sizes}.png`, 80 | media: '(prefers-color-scheme: light)', 81 | })), 82 | ...iconSizes.map((sizes) => ({ 83 | type: 'image/png', 84 | sizes, 85 | url: `/favicon-${sizes}.png`, 86 | media: '(prefers-color-scheme: light)', 87 | })), 88 | ...andriodIconSizes.map((sizes) => ({ 89 | type: 'image/png', 90 | sizes, 91 | url: `/dark-android-icon-${sizes}.png`, 92 | media: '(prefers-color-scheme: dark)', 93 | })), 94 | ...iconSizes.map((sizes) => ({ 95 | type: 'image/png', 96 | sizes, 97 | url: `/dark-favicon-${sizes}.png`, 98 | media: '(prefers-color-scheme: dark)', 99 | })), 100 | ], 101 | apple: [ 102 | ...appleIconSizes.map((sizes) => ({ 103 | type: 'image/png', 104 | sizes, 105 | url: `/apple-icon-${sizes}.png`, 106 | media: '(prefers-color-scheme: light)', 107 | })), 108 | ...appleIconSizes.map((sizes) => ({ 109 | type: 'image/png', 110 | sizes, 111 | url: `/dark-apple-icon-${sizes}.png`, 112 | media: '(prefers-color-scheme: dark)', 113 | })), 114 | ], 115 | }, 116 | } 117 | 118 | interface LayoutProps { 119 | children: React.ReactNode 120 | params?: Record
26 |
32 | )
33 | }
34 |
35 | function ConditionalRender({
36 | a,
37 | b,
38 | align,
39 | width,
40 | }: ComparisonProps & {
41 | width: SpringValue
27 |
28 |
29 |
30 |
57 | {renderAB(a(interpolation), b(interpolation))}
58 |
59 | )
60 | }
61 |
62 | interpolation = width.to((v) => `calc(${v * 100}% + ${1 - v} * var(--w0))`)
63 |
64 | return (
65 |
77 |
78 | {a}
79 |
80 |
81 |
82 | {b}
83 |
84 |
85 | )
86 |
--------------------------------------------------------------------------------
/website/src/components/Content.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const content = (
4 | <>
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export type ContentProps
11 |
21 |
44 |
27 |
30 |
58 |
31 |
32 |
33 |
34 |
57 |
40 |
56 |
41 |
42 |
46 |
47 |
51 |
55 |
42 |
43 | The quick brown fox jumps over the lazy dog
44 |
45 |
46 |
47 |
48 | The quick brown fox jumps over the lazy dog
49 |
50 |
51 | {``}
54 |
59 |
60 | Adjust the balance ratio to a custom value between{' '}
61 | 0 (loose) and{' '}
62 | 1 (compact, the default)
63 |
64 |
65 |
70 |
88 | Note that if the native CSS balance (
89 |
68 |
71 |
72 |
77 | npm install react-wrap-balancer
78 |
79 |
82 |
84 |
85 |
86 | The simplest way is to wrap the text content with{' '}
87 | {`
90 | {highlightedCode`import ${'Balancer'} from ${"'react-wrap-balancer'"}\n\n// ...\n\n
92 |
93 | If you have multiple {`\n ${'
`}
91 |
100 | {highlightedCode`import { ${'Provider'} } from ${"'react-wrap-balancer'"}\n\n// ...\n\n${'
102 |
104 |
105 |
135 | -
106 |
- 1 kB Gzipped 107 |
- Fast O(log n) algorithm 108 |
-
109 | Doesn’t cause{' '}
110 |
layout shifts 111 |
112 | - Works perfectly with web fonts 113 |
-
114 | SSR and{' '}
115 |
116 | streaming SSR 117 | {' '} 118 | supported 119 |
120 | -
121 | Switches to native CSS{' '}
122 |
123 | text-wrap: balance 124 | {' '} 125 | if available 126 |
127 | -
128 |
129 | Next.js 13 app directory and React Server Components 130 | {' '} 131 | compatible 132 |
133 |
136 | 137 | This library requires React ≥ 16.8.0, and IE 11 is not supported. 138 |
139 |
140 |
12 | Wrap 13 |
14 | Balancer 15 |
12 |
React: A JavaScript library for building user interfaces
21 | 22 | } 23 | b={ 24 |
26 |
27 | React: A JavaScript library for building user interfaces
28 |
29 |
30 |
34 |
35 | React Wrap Balancer avoids single hanging word on the last line
36 |
37 |
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/website/src/sections/HowItWorks.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import Balancer from 'react-wrap-balancer'
4 |
5 | import BlankLink from '../components/BlankLink'
6 |
7 | export default function HowItWorks() {
8 | return (
9 | <>
10 |
11 |
14 | React Wrap Balancer reduces the width of the content wrapper as much as 15 | it could, before causing an extra line break. When reaching the minimum 16 | width, each line will approximately have the same width, and look more 17 | compact and balanced. 18 |
19 |
20 | Check out the{' '}
21 |
11 |
19 | It is worth to mention that this project is a workaround for the lack of 20 | native support for balanced text wrapping in CSS. It is not perfect as 21 | it adds some performance overhead. However, the performance impact is 22 | usually very trivial and can be ignored in most cases. 23 |
24 |
30 | The following benchmark (
31 |
43 |
44 | 50 | It shows that when there are less than 100 elements with React Wrap 51 | Balancer in the initial HTML, the per-element impact to the page load 52 | time is less than 0.25 ms. When there are 1,000 elements, that number 53 | increases to ~1 ms. When there are 5,000 elements, the per-element 54 | script execution time becomes ~7 ms. 55 |
56 |62 | These numbers don’t scale linearly because re-layouts usually have 63 | an impact to other elements on the page. Hence the best practice is to 64 | only use this library for title elements when necessary, or use it for 65 | content that is behind user interactions (e.g. tooltips), to avoid 66 | negative impacts to the page performance. 67 |
68 | 69 | ) 70 | } 71 | -------------------------------------------------------------------------------- /website/src/sections/UseCases.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { animated } from '@react-spring/web' 4 | import Balancer from 'react-wrap-balancer' 5 | 6 | import Comparison from '../components/Comparison' 7 | import Content from '../components/Content' 8 | import TooltipArrowIcon from '../icons/TooltipArrow' 9 | import TooltipTriggerIcon from '../icons/TooltipTrigger' 10 | 11 | export default function UseCases() { 12 | return ( 13 | <> 14 |
15 |
20 |
32 | )}
33 | b={(width) => (
34 |
21 |
22 |
26 |
28 |
23 | This deployment is currently in progress. Read more.
24 |
25 |
29 |
31 |
35 |
49 | )}
50 | />
51 |
36 |
37 |
43 |
45 |
38 |
39 | This deployment is currently in progress. Read more.
40 |
41 |
42 |
46 |
48 |
52 | Useful in tooltips and other UI components
53 |
54 | 58 | 第六個沉思：論物質性東西的存在；論人的靈魂和肉體之間的實在區別 59 |
60 | 61 | } 62 | b={ 63 |
65 |
66 | 第六個沉思：論物質性東西的存在；論人的靈魂和肉體之間的實在區別
67 |
68 |
69 |
73 | Left aligned, non-latin content
74 |
75 | - Jorge Luis Borges 85 | 86 | } 87 | b={ 88 |
89 |97 | } 98 | /> 99 |90 | You have wakened not out of sleep, but into a prior dream, and 91 | that dream lies within another, and so on, to infinity, which is 92 | the number of grains of sand. The path that you are to take is 93 | endless, and you will die before you have truly awakened. 94 | 95 |
- Jorge Luis Borges 96 |