react-wrap-balancer - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/index.d.ts

@@ -8,2 +8,2 @@ import React from 'react';
 
-export { Balancer };
+export { Balancer as default };

dist/index.js

@@ -1,104 +0,3 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.tsx
-var src_exports = {};
-__export(src_exports, {
-  Balancer: () => Balancer
-});
-module.exports = __toCommonJS(src_exports);
-var import_react = __toESM(require("react"));
-var SYMBOL_KEY = "__wrap_balancer__";
-var DO_BALANCE = Symbol.for(SYMBOL_KEY);
-var IS_SERVER = typeof window === "undefined";
-var useIsomorphicLayoutEffect = IS_SERVER ? import_react.default.useEffect : import_react.default.useLayoutEffect;
-if (!IS_SERVER) {
-  window[DO_BALANCE] = (id, wrapper) => {
-    wrapper = wrapper || window.document.querySelector(`[data-balancer="${id}"]`);
-    const container = wrapper.parentElement;
-    if (!wrapper || !container)
-      return;
-    const update = (width) => wrapper.style.maxWidth = width + "px";
-    wrapper.style.maxWidth = "";
-    const w = container.offsetWidth;
-    const h = container.offsetHeight;
-    let l = 0;
-    let r = w;
-    let m;
-    while (l + 1 < r) {
-      m = ~~((l + r) / 2);
-      update(m);
-      if (container.offsetHeight === h) {
-        r = m;
-      } else {
-        l = m;
-      }
-    }
-    update(r);
-  };
-}
-var Balancer = ({
-  as = "span",
-  children,
-  ...props
-}) => {
-  const As = as;
-  const id = import_react.default.useId();
-  const wrapperRef = import_react.default.useRef();
-  useIsomorphicLayoutEffect(() => {
-    if (!wrapperRef.current)
-      return;
-    window[DO_BALANCE](0, wrapperRef.current);
-  }, [children]);
-  import_react.default.useEffect(() => {
-    if (!wrapperRef.current)
-      return;
-    const container = wrapperRef.current.parentElement;
-    if (!container)
-      return;
-    const resizeObserver = new ResizeObserver(() => {
-      if (!wrapperRef.current)
-        return;
-      window[DO_BALANCE](0, wrapperRef.current);
-    });
-    resizeObserver.observe(container);
-    return () => {
-      resizeObserver.unobserve(container);
-    };
-  }, []);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(As, {
-    ...props,
-    "data-balancer": id,
-    ref: wrapperRef,
-    style: { display: "inline-block", textDecoration: "inherit" }
-  }, children), /* @__PURE__ */ import_react.default.createElement("script", {
-    dangerouslySetInnerHTML: {
-      __html: `window[Symbol.for("${SYMBOL_KEY}")]("${id}")`
-    }
-  }));
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Balancer
-});
+"use client"
+var p=Object.create;var a=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var r in t)a(e,r,{get:t[r],enumerable:!0})},u=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of m(t))!E.call(e,o)&&o!==r&&a(e,o,{get:()=>t[o],enumerable:!(i=w(t,o))||i.enumerable});return e};var h=(e,t,r)=>(r=e!=null?p(y(e)):{},u(t||!e||!e.__esModule?a(r,"default",{value:e,enumerable:!0}):r,e)),_=e=>u(a({},"__esModule",{value:!0}),e);var L={};b(L,{default:()=>x});module.exports=_(L);var n=h(require("react")),c="__wrap_balancer",g=typeof window=="undefined",d=g?n.default.useEffect:n.default.useLayoutEffect,v=({as:e="span",children:t,...r})=>{let i=e,o=n.default.useId(),s=n.default.useRef();return d(()=>{!s.current||window[c](0,s.current)},[t]),d(()=>{if(!s.current)return;let f=s.current.parentElement;if(!f)return;let l=new ResizeObserver(()=>{!s.current||window[c](0,s.current)});return l.observe(f),()=>l.unobserve(f)},[]),n.default.createElement(n.default.Fragment,null,n.default.createElement(i,{...r,"data-balancer":o,ref:s,style:{display:"inline-block",verticalAlign:"top",textDecoration:"inherit"}},t),n.default.createElement("script",{dangerouslySetInnerHTML:{__html:`window.${c}=((e,t)=>{let l;t=t||window.document.querySelector(\`[data-balancer="\${e}"]\`);let a=t.parentElement,f=e=>t.style.maxWidth=e+"px";t.style.maxWidth="";let o=a.offsetWidth,d=a.offsetHeight,i=o/2,r=o;for(;i+1<r;)f(l=~~((i+r)/2)),a.offsetHeight==d?r=l:i=l;f(r)});window.${c}("${o}")`}}))},x=v;0&&(module.exports={});
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-wrap-balancer",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Better text wrapping.",
@@ -28,4 +28,4 @@ "main": "dist/index.js",
   "scripts": {
-    "build": "tsup src/index.tsx --format cjs,esm --dts-resolve --external react"
+    "build": "tsup src/index.tsx"
   }
 }

README.md

 # React Wrap Balancer
 
+One simple component to make your titles more elegant:
+
+![](.github/demo.gif)
+
+Notice that in “Balanced Title Wrapping” above, every line of wrapped text has almost the same width, so it will likely not to have one single word in a line.
+
 ## Usage
@@ -4,0 +10,0 @@

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15908

increased by136.13%

Number of package files

7

increased by40%

Number of lines in readme file

43

increased by16.22%

Worsened metrics

Lines of code

19

decreased by-89.62%

Number of low quality alerts

3

increased by50%

No dependency changes