react-wrap-balancer - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.d.ts

@@ -30,2 +30,8 @@ import React from 'react';
     /**
+     * An option to skip the re-balance logic
+     * and use the native CSS text-balancing if supported.
+     * @default true
+     */
+    preferNative?: boolean;
+    /**
      * The nonce attribute to allowlist inline script injection by the component.
@@ -39,2 +45,8 @@ */
     /**
+     * An option to skip the re-balance logic
+     * and use the native CSS text-balancing if supported.
+     * @default true
+     */
+    preferNative?: boolean;
+    /**
      * The nonce attribute to allowlist inline script injection by the component
@@ -45,4 +57,4 @@ */
 }>;
-declare const Balancer: <ElementType extends React.ElementType<any> = React.ElementType<any>>({ ratio, nonce, children, ...props }: BalancerProps<ElementType>) => JSX.Element;
+declare const Balancer: <ElementType extends React.ElementType<any> = React.ElementType<any>>({ ratio, preferNative, nonce, children, ...props }: BalancerProps<ElementType>) => JSX.Element;
 
 export { Balancer, Provider, Balancer as default };

dist/index.js

 "use client"
-var w=Object.create;var f=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var M=(t,n)=>{for(var e in n)f(t,e,{get:n[e],enumerable:!0})},b=(t,n,e,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of W(n))!L.call(t,r)&&r!==e&&f(t,r,{get:()=>n[r],enumerable:!(s=I(n,r))||s.enumerable});return t};var _=(t,n,e)=>(e=t!=null?w($(t)):{},b(n||!t||!t.__esModule?f(e,"default",{value:t,enumerable:!0}):e,t)),P=t=>b(f({},"__esModule",{value:!0}),t);var K={};M(K,{Balancer:()=>B,Provider:()=>H,default:()=>V});module.exports=P(K);var i=_(require("react"));var c=_(require("react")),E=typeof window=="undefined",m=E?c.default.useEffect:c.default.useLayoutEffect,S=0,Y=()=>++S,R=!1;function A(){let[t,n]=c.default.useState(R?Y:void 0);return m(()=>{t===void 0&&n(++S),R=!0},[]),t===void 0?t:`rwb-${t.toString(32)}`}function T(){return c.default.useMemo(()=>"useId"in c.default?c.default.useId:A,[])()}var y="__wrap_b",p="__wrap_n",v="__wrap_o",g=(t,n,e)=>{e=e||document.querySelector(`[data-br="${t}"]`);let s=e.parentElement,r=O=>e.style.maxWidth=O+"px";e.style.maxWidth="";let o=s.clientWidth,u=s.clientHeight,a=o/2-.25,l=o+.5,d;if(o){for(r(a),a=Math.max(e.scrollWidth,a);a+1<l;)d=Math.round((a+l)/2),r(d),s.clientHeight===u?l=d:a=d;r(l*n+o*(1-n))}e.__wrap_o||(typeof ResizeObserver!="undefined"?(e.__wrap_o=new ResizeObserver(()=>{self.__wrap_b(0,+e.dataset.brr,e)})).observe(s):process.env.NODE_ENV==="development"&&console.warn("The browser you are using does not support the ResizeObserver API. Please consider add polyfill for this API to avoid potential layout shifts or upgrade your browser. Read more: https://github.com/shuding/react-wrap-balancer#browser-support-information"))},N=g.toString(),C='(self.CSS&&CSS.supports("text-wrap","balance")?1:2)',h=(t,n,e="")=>(e&&(e=`self.${p}!=1&&${e}`),i.default.createElement("script",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:(t?"":`self.${p}=self.${p}||${C};self.${y}=${N};`)+e},nonce:n})),x=i.default.createContext(!1),H=({nonce:t,children:n})=>i.default.createElement(x.Provider,{value:!0},h(!1,t),n),B=({ratio:t=1,nonce:n,children:e,...s})=>{let r=T(),o=i.default.useRef(),u=i.default.useContext(x),a=s.as||"span";return m(()=>{self[p]!==1&&o.current&&(self[y]=g)(0,t,o.current)},[e,t]),m(()=>{if(self[p]!==1)return()=>{if(!o.current)return;let l=o.current[v];l&&(l.disconnect(),delete o.current[v])}},[]),process.env.NODE_ENV==="development"&&e&&!Array.isArray(e)&&typeof e=="object"&&"type"in e&&typeof e.type=="string"&&e.type!=="span"&&console.warn(`<Balancer> should not wrap <${e.type}> inside. Instead, it should directly wrap text or inline nodes.
+var w=Object.create;var m=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var $=(e,n)=>{for(var t in n)m(e,t,{get:n[t],enumerable:!0})},_=(e,n,t,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of M(n))!W.call(e,o)&&o!==t&&m(e,o,{get:()=>n[o],enumerable:!(r=I(n,o))||r.enumerable});return e};var R=(e,n,t)=>(t=e!=null?w(P(e)):{},_(n||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e)),L=e=>_(m({},"__esModule",{value:!0}),e);var K={};$(K,{Balancer:()=>O,Provider:()=>C,default:()=>H});module.exports=L(K);var l=R(require("react"));var u=R(require("react")),b=typeof window=="undefined",y=b?u.default.useEffect:u.default.useLayoutEffect,Y=0,v=()=>++Y,S=!1;function A(){let[e,n]=u.default.useState(S?v:void 0);return y(()=>{e===void 0&&n(v()),S=!0},[]),e===void 0?e:`rwb-${e.toString(32)}`}function T(){return u.default.useMemo(()=>"useId"in u.default?u.default.useId:A,[])()}var E="__wrap_b",d="__wrap_n",g="__wrap_o",h=(e,n,t)=>{t=t||document.querySelector(`[data-br="${e}"]`);let r=t.parentElement,o=f=>t.style.maxWidth=f+"px";t.style.maxWidth="";let c=r.clientWidth,a=r.clientHeight,s=c/2-.25,i=c+.5,p;if(c){for(o(s),s=Math.max(t.scrollWidth,s);s+1<i;)p=Math.round((s+i)/2),o(p),r.clientHeight===a?i=p:s=p;o(i*n+c*(1-n))}t.__wrap_o||(typeof ResizeObserver!="undefined"?(t.__wrap_o=new ResizeObserver(()=>{self.__wrap_b(0,+t.dataset.brr,t)})).observe(r):process.env.NODE_ENV==="development"&&console.warn("The browser you are using does not support the ResizeObserver API. Please consider add polyfill for this API to avoid potential layout shifts or upgrade your browser. Read more: https://github.com/shuding/react-wrap-balancer#browser-support-information"))},N=h.toString(),V='(self.CSS&&CSS.supports("text-wrap","balance")?1:2)',x=(e,n,t="")=>(t&&(t=`self.${d}!=1&&${t}`),l.default.createElement("script",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:(e?"":`self.${d}=self.${d}||${V};self.${E}=${N};`)+t},nonce:n})),B=l.default.createContext({preferNative:!0,hasProvider:!1}),C=({preferNative:e=!0,nonce:n,children:t})=>{let r=l.default.useMemo(()=>({preferNative:e,hasProvider:!0}),[e]);return l.default.createElement(B.Provider,{value:r},x(!1,n),t)},O=({ratio:e=1,preferNative:n,nonce:t,children:r,...o})=>{let c=T(),a=l.default.useRef(),s=l.default.useContext(B),i=n!=null?n:s.preferNative,p=o.as||"span";return y(()=>{i&&self[d]===1||a.current&&(self[E]=h)(0,e,a.current)},[r,i,e]),y(()=>{if(!(i&&self[d]===1))return()=>{if(!a.current)return;let f=a.current[g];f&&(f.disconnect(),delete a.current[g])}},[i]),process.env.NODE_ENV==="development"&&r&&!Array.isArray(r)&&typeof r=="object"&&"type"in r&&typeof r.type=="string"&&r.type!=="span"&&console.warn(`<Balancer> should not wrap <${r.type}> inside. Instead, it should directly wrap text or inline nodes.
 
 Try changing this:
-  <Balancer><${e.type}>content</${e.type}></Balancer>
+  <Balancer><${r.type}>content</${r.type}></Balancer>
 To:
-  <${e.type}><Balancer>content</Balancer></${e.type}>`),i.default.createElement(i.default.Fragment,null,i.default.createElement(a,{...s,"data-br":r,"data-brr":t,ref:o,style:{display:"inline-block",verticalAlign:"top",textDecoration:"inherit",textWrap:"balance"},suppressHydrationWarning:!0},e),h(u,n,`self.${y}("${r}",${t})`))};if(!E&&process.env.NODE_ENV!=="production"){let t=document.querySelector("[data-next-hide-fouc]");if(t){let n=s=>{for(let r of s)for(let o of Array.from(r.removedNodes)){if(o!==t)continue;e.disconnect();let u=document.querySelectorAll("[data-br]");for(let a of Array.from(u))self[y](0,+a.dataset.brr,a)}},e=new MutationObserver(n);e.observe(document.head,{childList:!0})}}var V=B;0&&(module.exports={Balancer,Provider});
+  <${r.type}><Balancer>content</Balancer></${r.type}>`),l.default.createElement(l.default.Fragment,null,l.default.createElement(p,{...o,"data-br":c,"data-brr":e,ref:a,style:{display:"inline-block",verticalAlign:"top",textDecoration:"inherit",textWrap:i?"balance":"initial"},suppressHydrationWarning:!0},r),x(s.hasProvider,t,`self.${E}("${c}",${e})`))};if(!b&&process.env.NODE_ENV!=="production"){let e=document.querySelector("[data-next-hide-fouc]");if(e){let n=r=>{for(let o of r)for(let c of Array.from(o.removedNodes)){if(c!==e)continue;t.disconnect();let a=document.querySelectorAll("[data-br]");for(let s of Array.from(a))self[E](0,+s.dataset.brr,s)}},t=new MutationObserver(n);t.observe(document.head,{childList:!0})}}var H=O;0&&(module.exports={Balancer,Provider});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-wrap-balancer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Simple React component that makes titles more readable.",
@@ -17,2 +17,7 @@ "repository": {
   ],
+  "scripts": {
+    "build": "tsup src/index.tsx",
+    "dev": "tsup src/index.tsx --watch",
+    "dev:website": "turbo run dev --filter=website..."
+  },
   "keywords": [
@@ -36,8 +41,3 @@ "react",
     "react": ">=16.8.0 || ^17.0.0 || ^18"
-  },
-  "scripts": {
-    "build": "tsup src/index.tsx",
-    "dev": "tsup src/index.tsx --watch",
-    "dev:website": "turbo run dev --filter=website..."
   }
-}
+}

README.md

@@ -39,2 +39,3 @@ [![React Wrap Balancer - Simple React Component That Makes Titles More Readable](.github/card.png)](https://react-wrap-balancer.vercel.app)
 - **`ratio`** (_optional_): The ratio of “balance-ness”, 0 <= ratio <= 1. Default to `1`.
+- **`preferNative`** (_optional_): An option to skip the re-balance logic and use the native CSS text-balancing if supported. Default to `true`.
 - **`nonce`** (_optional_): The [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute to allowlist inline script injection by the component.
@@ -41,0 +42,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44418

increased by7.46%

Lines of code

90

increased by18.42%

Number of lines in readme file

100

increased by1.01%

No dependency changes