Add preferNative option

[lucasweng]

Provide an option to opt out of the native CSS text-balancing when the text-wrap: balance can't serve the needs or a customized ratio is preferred.

Closes #75.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-wrap-balancer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 21, 2023 0:38am

[shuding]

Can you add the same option to Provider as well? And adjust the provider to pass it down. Thanks!

[lucasweng]

Hey @shuding,
Should Balancer be able to override the preferNative context value when the provider passes false? It seems to me overriding the true value from context is more likely to happen, as the case mentioned in #75 🤔 So, it only allows overriding preferNative: true for now. What are your thoughts on this? Thanks!

[shuding]

Yes I think it should be able to override. Maybe we can extend this context to be an array or an object to contain more information if necessary.

[lucasweng]

Updated Balancer in b9ceaa1.

If preferNative is not provided to Balancer, the ?? operator will take the value from the context, which defaults to true in createContext and in Provider. So when preferNative is explicitly provided, it can override.

@@ -184,7 +184,7 @@ const Provider: React.FC<{

 const Balancer = <ElementType extends React.ElementType = React.ElementType>({
   ratio = 1,
-  preferNative = true,
+  preferNative,
   nonce,
   children,
   ...props
@@ -192,7 +192,7 @@ const Balancer = <ElementType extends React.ElementType = React.ElementType>({
   const id = useId()
   const wrapperRef = React.useRef<WrapperElement>()
   const contextValue = React.useContext(BalancerContext)
-  const preferNativeBalancing = preferNative && contextValue.preferNative
+  const preferNativeBalancing = preferNative ?? contextValue.preferNative
   const Wrapper: React.ElementType = props.as || 'span'

[shuding]

Thank you!