react-wrap-balancer - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/index.d.ts

 import React from 'react';
 
 declare type Props = {
-    as: string;
+    as?: string;
 };
@@ -6,0 +6,0 @@ declare const Balancer: React.FC<Props>;

dist/index.js

@@ -37,13 +37,11 @@ var __create = Object.create;
 if (!IS_SERVER) {
-  window[DO_BALANCE] = (id) => {
-    const el = window.document.querySelector(
-      `[data-balanced="${id}"]`
-    );
-    if (!el)
+  window[DO_BALANCE] = (id, wrapper) => {
+    wrapper = wrapper || window.document.querySelector(`[data-balancer="${id}"]`);
+    const container = wrapper.parentElement;
+    if (!wrapper || !container)
       return;
-    const wrapper = el.childNodes[0];
     const update = (width) => wrapper.style.maxWidth = width + "px";
     wrapper.style.maxWidth = "";
-    const w = el.offsetWidth;
-    const h = el.offsetHeight;
+    const w = container.offsetWidth;
+    const h = container.offsetHeight;
     let l = 0;
@@ -55,3 +53,3 @@ let r = w;
       update(m);
-      if (el.offsetHeight === h) {
+      if (container.offsetHeight === h) {
         r = m;
@@ -65,29 +63,37 @@ } else {
 }
-var Balancer = ({ as = "p", children, ...props }) => {
+var Balancer = ({
+  as = "span",
+  children,
+  ...props
+}) => {
   const As = as;
-  const style = Object.assign({}, props.style);
   const id = import_react.default.useId();
-  const containerRef = import_react.default.useRef();
+  const wrapperRef = import_react.default.useRef();
   useIsomorphicLayoutEffect(() => {
-    window[DO_BALANCE](id);
+    if (!wrapperRef.current)
+      return;
+    window[DO_BALANCE](0, wrapperRef.current);
   }, [children]);
   import_react.default.useEffect(() => {
-    if (containerRef.current) {
-      const resizeObserver = new ResizeObserver(() => {
-        window[DO_BALANCE](id);
-      });
-      resizeObserver.observe(containerRef.current);
-      return () => {
-        resizeObserver.unobserve(containerRef.current);
-      };
-    }
+    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,
-    style,
-    "data-balanced": id,
-    ref: containerRef
-  }, /* @__PURE__ */ import_react.default.createElement("span", {
+    "data-balancer": id,
+    ref: wrapperRef,
     style: { display: "inline-block" }
-  }, children)), /* @__PURE__ */ import_react.default.createElement("script", {
+  }, children), /* @__PURE__ */ import_react.default.createElement("script", {
     dangerouslySetInnerHTML: {
@@ -94,0 +100,0 @@ __html: `window[Symbol.for("${SYMBOL_KEY}")]("${id}")`

package.json

 {
   "name": "react-wrap-balancer",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Better text wrapping.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # React Wrap Balancer
 
+## Usage
+
+Install it to your React project:
+
+```bash
+npm i react-wrap-balancer
+```
+
+And wrap any text with it:
+
+```jsx
+import { Balancer } from 'react-wrap-balancer'
+
+// ...
+
+function Title() {
+  return (
+    <h1>
+      <Balancer>My Awesome Title</Balancer>
+    </h1>
+  )
+}
+```
+
 ## Requirements
@@ -4,0 +28,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

6683

increased by8.74%

Lines of code

183

increased by7.02%

Number of lines in readme file

37

increased by184.62%

No dependency changes