react-wrap-balancer - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

dist/index.d.ts

@@ -8,3 +8,3 @@ import React from 'react';
 }
-declare type RelayoutFn = (id: string | number, ratio: number, wrapper?: WrapperElement) => void;
+type RelayoutFn = (id: string | number, ratio: number, wrapper?: WrapperElement) => void;
 declare global {
@@ -15,3 +15,3 @@ interface Window {
 }
-interface BalancerProps extends React.HTMLAttributes<HTMLElement> {
+interface BalancerOwnProps<ElementType extends React.ElementType = React.ElementType> extends React.HTMLAttributes<HTMLElement> {
     /**
@@ -21,3 +21,3 @@ * The HTML tag to use for the wrapper element.
      */
-    as?: React.ElementType;
+    as?: ElementType;
     /**
@@ -30,9 +30,18 @@ * The balance ratio of the wrapper width (0 <= ratio <= 1).
     ratio?: number;
+    /**
+     * The nonce attribute to allowlist inline script injection by the component.
+     */
+    nonce?: string;
     children?: React.ReactNode;
 }
+type BalancerProps<ElementType extends React.ElementType> = BalancerOwnProps<ElementType> & Omit<React.ComponentPropsWithoutRef<ElementType>, keyof BalancerOwnProps>;
 declare const Provider: React.FC<{
+    /**
+     * The nonce attribute to allowlist inline script injection by the component
+     */
+    nonce?: string;
     children?: React.ReactNode;
 }>;
-declare const Balancer: React.FC<BalancerProps>;
+declare const Balancer: <ElementType extends React.ElementType<any> = React.ElementType<any>>({ ratio, nonce, children, ...props }: BalancerProps<ElementType>) => JSX.Element;
 
-export { Provider, Balancer as default };
+export { Balancer, Provider, Balancer as default };

dist/index.js

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

package.json

 {
   "name": "react-wrap-balancer",
-  "version": "0.4.1",
-  "description": "Better text wrapping.",
+  "version": "0.5.0",
+  "description": "Simple React component that makes titles more readable.",
   "main": "dist/index.js",
@@ -11,7 +11,2 @@ "module": "dist/index.mjs",
   ],
-  "scripts": {
-    "build": "tsup src/index.tsx",
-    "dev": "tsup src/index.tsx --watch",
-    "dev:website": "turbo run dev --filter=website..."
-  },
   "keywords": [
@@ -34,4 +29,9 @@ "react",
   "peerDependencies": {
-    "react": "^18.0.0"
+    "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

@@ -33,2 +33,12 @@ [![React Wrap Balancer - Simple React Component That Makes Titles More Readable](.github/card.png)](https://react-wrap-balancer.vercel.app)
 
+### `<Balancer>`
+
+`<Balancer>` is the main component of the library. It will automatically balance the text content inside it. It accepts the following props:
+
+- **`as`** (_optional_): The HTML tag to be used to wrap the text content. Default to `span`.
+- **`ratio`** (_optional_): The ratio of “balance-ness”, 0 <= ratio <= 1. Default to `1`.
+- **`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.
+
+### `<Provider>`
+
 If you have multiple `<Balancer>` components used, it’s recommended (but optional) to also use
@@ -63,3 +73,3 @@ `<Provider>` to wrap the entire app. This will make them share the re-balance logic and reduce the HTML size:
 |  Opera  |     51      |
-|   IE    | Not Support |
+|   IE    | No Support  |
 
@@ -76,5 +86,5 @@ Mobile:
 
-Cross-browser compatibility issues are mainly due to the fact that lib uses the ResizeObserver API, more information about this API can be found at this [link](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+Cross-browser compatibility issues are mainly due to the fact that lib uses the ResizeObserver API. More information about this API can be found at this [link](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
 
-If you are using browser which version is lower than versions in table, please consider add polyfill for this API or upgrade your browser.
+If you are using a browser which version is lower than the versions in the table, please consider adding polyfill for this API or upgrade your browser.
 
@@ -81,0 +91,0 @@ ## About

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

38546

increased by24.45%

Lines of code

72

increased by18.03%

Number of lines in readme file

99

increased by11.24%

No dependency changes