react-wrap-balancer - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

dist/index.d.ts

 import React from 'react';
 
-declare type Props = {
+declare const SYMBOL_KEY = "__wrap_b";
+declare type RelayoutFn = (id: string | number, ratio: number, wrapper?: HTMLElement) => void;
+declare global {
+    interface Window {
+        [SYMBOL_KEY]: RelayoutFn;
+    }
+}
+interface BalancerProps extends React.HTMLAttributes<HTMLElement> {
     /**
@@ -8,3 +15,3 @@ * The HTML tag to use for the wrapper element.
      */
-    as?: string;
+    as?: React.ElementType;
     /**
@@ -18,5 +25,8 @@ * The balance ratio of the wrapper width (0 <= ratio <= 1).
     children?: React.ReactNode;
-};
-declare const Balancer: React.FC<Props>;
+}
+declare const Provider: React.FC<{
+    children?: React.ReactNode;
+}>;
+declare const Balancer: React.FC<BalancerProps>;
 
-export { Balancer as default };
+export { Provider, Balancer as default };

dist/index.js

 "use client"
-var h=Object.create;var f=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var H=(t,e)=>{for(var n in e)f(t,n,{get:e[n],enumerable:!0})},m=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of v(e))!g.call(t,r)&&r!==n&&f(t,r,{get:()=>e[r],enumerable:!(o=_(e,r))||o.enumerable});return t};var S=(t,e,n)=>(n=t!=null?h(L(t)):{},m(e||!t||!t.__esModule?f(n,"default",{value:t,enumerable:!0}):n,t)),M=t=>m(f({},"__esModule",{value:!0}),t);var T={};H(T,{default:()=>R});module.exports=M(T);var l=S(require("react")),a="__wrap_balancer",p=typeof window=="undefined",b=p?l.default.useEffect:l.default.useLayoutEffect,y=(t,e,n)=>{n=n||document.querySelector(`[data-br="${t}"]`);let o=n.parentElement,r=E=>n.style.maxWidth=E+"px";n.style.maxWidth="";let i=o.clientWidth,s=o.clientHeight,c=i/2,u=i,d;if(i){for(;c+1<u;)d=~~((c+u)/2),r(d),o.clientHeight==s?u=d:c=d;r(u*e+i*(1-e))}},x=y.toString();if(!p&&process.env.NODE_ENV!=="production"){let t=document.querySelector("[data-next-hide-fouc]");if(t){let e=o=>{for(let r of o)for(let i of r.removedNodes)if(i===t){n.disconnect();let s=document.querySelectorAll("[data-br]");for(let c of s)self[a](0,+c.dataset.brr,c)}},n=new MutationObserver(e);n.observe(document.head,{childList:!0})}}var I=({as:t="span",ratio:e=1,children:n,...o})=>{let r=t,i=l.default.useId(),s=l.default.useRef();return b(()=>{!s.current||(self[a]=y)(0,e,s.current)},[n,e]),b(()=>{if(!s.current)return;let c=s.current.parentElement;if(!c)return;let u=new ResizeObserver(()=>{!s.current||self[a](0,e,s.current)});return u.observe(c),()=>u.unobserve(c)},[]),l.default.createElement(l.default.Fragment,null,l.default.createElement(r,{...o,"data-br":i,"data-brr":e,ref:s,style:{display:"inline-block",verticalAlign:"top",textDecoration:"inherit"},suppressHydrationWarning:!0},n),l.default.createElement("script",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:`self.${a}=${x};self.${a}("${i}",${e})`}}))},R=I;0&&(module.exports={});
+var R=Object.create;var u=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var g=(e,n)=>{for(var t in n)u(e,t,{get:n[t],enumerable:!0})},m=(e,n,t,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of x(n))!S.call(e,r)&&r!==t&&u(e,r,{get:()=>n[r],enumerable:!(c=L(n,r))||c.enumerable});return e};var H=(e,n,t)=>(t=e!=null?R(M(e)):{},m(n||!e||!e.__esModule?u(t,"default",{value:e,enumerable:!0}):t,e)),T=e=>m(u({},"__esModule",{value:!0}),e);var Y={};g(Y,{Provider:()=>O,default:()=>W});module.exports=T(Y);var s=H(require("react")),f="__wrap_b",b="__wrap_o",y=typeof window=="undefined",_=y?s.default.useEffect:s.default.useLayoutEffect,E=(e,n,t)=>{t=t||document.querySelector(`[data-br="${e}"]`);let c=t.parentElement,r=v=>t.style.maxWidth=v+"px";t.style.maxWidth="";let o=c.clientWidth,l=c.clientHeight,a=o/2,i=o,d;if(o){for(;a+1<i;)d=~~((a+i)/2),r(d),c.clientHeight===l?i=d:a=d;r(i*n+o*(1-n))}t.__wrap_o||(t.__wrap_o=new ResizeObserver(()=>{self.__wrap_b(0,+t.dataset.brr,t)})).observe(c)},B=E.toString(),h=(e,n)=>s.default.createElement("script",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:(e?"":`self.${f}=${B};`)+(n||"")}}),p=s.default.createContext(!1),O=({children:e})=>s.default.createElement(p.Provider,{value:!0},h(!1),e),C=({as:e="span",ratio:n=1,children:t,...c})=>{let r=s.default.useId(),o=s.default.useRef(),l=s.default.useContext(p);return _(()=>{o.current&&(self[f]=E)(0,n,o.current)},[t,n]),_(()=>()=>{if(o.current){let a=o.current[b];a&&(a.disconnect(),delete o.current[b])}},[]),s.default.createElement(s.default.Fragment,null,s.default.createElement(e,{...c,"data-br":r,"data-brr":n,ref:o,style:{display:"inline-block",verticalAlign:"top",textDecoration:"inherit"},suppressHydrationWarning:!0},t),h(l,`self.${f}("${r}",${n})`))};if(!y&&process.env.NODE_ENV!=="production"){let e=document.querySelector("[data-next-hide-fouc]");if(e){let n=c=>{for(let r of c)for(let o of Array.from(r.removedNodes)){if(o!==e)continue;t.disconnect();let l=document.querySelectorAll("[data-br]");for(let a of Array.from(l))self[f](0,+a.dataset.brr,a)}},t=new MutationObserver(n);t.observe(document.head,{childList:!0})}}var W=C;0&&(module.exports={Provider});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-wrap-balancer",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Better text wrapping.",
@@ -21,4 +21,6 @@ "main": "dist/index.js",
     "@types/node": "^18.11.13",
+    "@types/react": "^18.0.26",
     "react": "^18.2.0",
     "tsup": "^6.4.0",
+    "turbo": "^1.6.3",
     "typescript": "^4.8.4"
@@ -30,4 +32,6 @@ },
   "scripts": {
-    "build": "tsup src/index.tsx"
+    "build": "tsup src/index.tsx",
+    "dev": "tsup src/index.tsx --watch",
+    "dev:website": "turbo run dev --filter=website..."
   }
 }

README.md

@@ -17,3 +17,3 @@ [![React Wrap Balancer - Simple React Component That Makes Titles More Readable](.github/card.png)](https://react-wrap-balancer.vercel.app)
 
-And wrap any text with it:
+And wrap text content with it:
 
@@ -34,2 +34,19 @@ ```jsx
 
+If you have multiple `<Balancer>` components used, it’s recommended (but optional) to also use
+`<Provider>` to wrap the entire app. This will make them share the re-balance logic and reduce the HTML size:
+
+```jsx
+import { Provider } from 'react-wrap-balancer'
+
+// ...
+
+function App() {
+  return (
+    <Provider>
+      <MyApp/>
+    </Provider>
+  )
+}
+```
+
 For full documentation and use cases, please visit [**react-wrap-balancer.vercel.app**](https://react-wrap-balancer.vercel.app).
@@ -36,0 +53,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

24925

increased by22.72%

Lines of code

46

increased by35.29%

Number of lines in readme file

63

increased by36.96%

Worsened metrics

Dev dependency count

6

increased by50%

No dependency changes