### Install React Wrap Balancer using npm Source: https://github.com/shuding/react-wrap-balancer/blob/main/README.md This command installs the react-wrap-balancer library into your project using npm. It's a prerequisite for using the component. ```bash npm i react-wrap-balancer ``` -------------------------------- ### Tooltip and UI Component Example (React) Source: https://context7.com/shuding/react-wrap-balancer/llms.txt Provides an example of using the Balancer component within a tooltip or other UI components to ensure that the message text wraps elegantly and remains readable. ```tsx import Balancer from 'react-wrap-balancer' function Tooltip({ message }: { message: string }) { return (
{message}
) } // Usage ``` -------------------------------- ### Balanced Text Wrapping for Blockquotes (React) Source: https://context7.com/shuding/react-wrap-balancer/llms.txt Shows how to use React Wrap Balancer with blockquotes to ensure balanced text wrapping, even with the `preferNative` option set to false. This example wraps a quote and its attribution. ```tsx import Balancer from 'react-wrap-balancer' function Quote() { return (
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
) } ``` -------------------------------- ### Using Provider Component in React Source: https://github.com/shuding/react-wrap-balancer/blob/main/README.md Shows how to wrap your entire application with the `` component from react-wrap-balancer. This is recommended when using multiple `` components to share re-balancing logic and reduce HTML output. ```jsx import { Provider } from 'react-wrap-balancer' // ... function App() { return ( ) } ``` -------------------------------- ### CSP Support with Nonce (React) Source: https://context7.com/shuding/react-wrap-balancer/llms.txt Explains how to use the `nonce` prop with `Provider` and `Balancer` components to ensure compatibility with strict Content Security Policy (CSP) configurations by allowing inline script injection for SSR hydration. ```tsx import Balancer, { Provider } from 'react-wrap-balancer' // Using nonce for CSP compliance function SecureApp({ nonce }: { nonce: string }) { return (

Secure Title with CSP Support

) } // Next.js example with CSP nonce // In your layout or page component: function Page() { const nonce = headers().get('x-nonce') || '' return ( Protected Content ) } ``` -------------------------------- ### Basic Usage of Balancer Component in React Source: https://github.com/shuding/react-wrap-balancer/blob/main/README.md Demonstrates how to import and use the `` component in a React functional component. The text content within `` will be automatically balanced for better readability. ```jsx import Balancer from 'react-wrap-balancer' // ... function Title() { return (

My Awesome Title

) } ``` -------------------------------- ### Provider Component for Optimization (React) Source: https://context7.com/shuding/react-wrap-balancer/llms.txt Demonstrates the use of the `Provider` component to optimize performance when using multiple `Balancer` instances. It shares re-balancing logic and reduces bundle size. The `preferNative` prop can also be set globally. ```tsx import Balancer, { Provider } from 'react-wrap-balancer' // Wrap your app with Provider for optimal performance function App() { return (