+
React: A JavaScript library for building user interfaces
+ {content} + + } + b={ +
+
+ React: A JavaScript library for building user interfaces
+
+
+ {content}
+
+
+ React Wrap Balancer avoids single hanging word on the last line
+
+
+
+
+
+ {
+ copy('npm install react-wrap-balancer')
+ setCopying((c) => c + 1)
+ setTimeout(() => {
+ setCopying((c) => c - 1)
+ }, 2000)
+ }}
+ >
+ npm install react-wrap-balancer
+
+ {copying > 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {`import Balancer from 'react-wrap-balancer'\n\n// ...\n\n
+ \n
`}
+
-
+
- 0.84 kB Gzipped +
- Fast O(log n) algorithm +
- + Doesn’t cause{' '} + + layout shifts + + +
- + SSR and{' '} + + streaming SSR + {' '} + supported + +
- + + Next.js 13 app directory and React Server Components + {' '} + compatible + +
+ + This library requires React ≥ 18.0.0, and IE 11 is not supported. +
++ + View project on + + + GitHub + + +
+
+
+
+ Adjust the balance ratio to a custom value between{' '}
+ 0 (loose) and{' '}
+ 1 (compact, the default)
+
+
+
+
+ React Wrap Balancer reduces the width of the content wrapper as much as + it could, before causing an extra line break. When the minimum width is + reached, each line should approximately have the same width, hence it’ll + look more balanced and compact. +
++ Check out the{' '} + + GitHub Repository + {' '} + to learn more. +
+
+
+ Useful in tooltips and other UI components
+
+ + 第六個沉思：論物質性東西的存在；論人的靈魂和肉體之間的實在區別 +
+ {content} + + } + b={ + <> +
+
+ 第六個沉思：論物質性東西的存在；論人的靈魂和肉體之間的實在區別
+
+
+ {content}
+
+ }
+ />
+
+ Left aligned, non-latin content
+
+ + + You have wakened not out of sleep, but into a prior dream, and + that dream lies within another, and so on, to infinity, which is + the number of grains of sand. The path that you are to take is + endless, and you will die before you have truly awakened. + ++ + } + b={ + <> +
- Jorge Luis Borges +
++ + } + /> ++ You have wakened not out of sleep, but into a prior dream, and + that dream lies within another, and so on, to infinity, which is + the number of grains of sand. The path that you are to take is + endless, and you will die before you have truly awakened. + +
- Jorge Luis Borges +
+
+ Makes multi-line content more compact with fewer visual changes when
+ resizing
+
+
+
+
+
+