@primaryindexonline/react-resize - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "@primaryindexonline/react-resize",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Change the width and height of the \"moving\" element('s) by holding and dragging the \"hanger\" element",
@@ -5,0 +5,0 @@ "author": "Konstantin Smirnov <[e-mail]>",

README.md

@@ -7,8 +7,8 @@ # react-resize
 
-1. create multiple resizing elements. Each `reresize` should be initialised with the unique `id`;
-2. apply multiple listeners to each `reresize` so other parts of your app can subsribe to changes and reflect correspondingly. You would need to specify the `id` of the `reresize` object you want to add listener to.
+1. create multiple resizing elements. Each `resize` should be created with the unique `id`;
+2. apply multiple listeners to each `resize` so other parts of your app can subsribe to changes and reflect correspondingly. You would need to specify the `id` of the `resize` object you want to add listener to.
 
-When using with `React`, working with references, you don't need to have `state` to update your elements with the new `width`. This allows to have tons of consumers without worrying about performance issues.
+When using with `React`, working with references, you don't need to have `state` to update your elements with the new `width` or `height`. This allows to have tons of consumers without worrying about performance issues.
 
-https://github.com/primaryindexonline/reresize/assets/8969094/797df5e2-9e72-4a96-9b92-400c146ca3ed
+https://github.com/primaryindexonline/resize/assets/8969094/797df5e2-9e72-4a96-9b92-400c146ca3ed
 
@@ -18,3 +18,3 @@ ### API
 ```
-npm i @primaryindexonline/reresize
+npm i @primaryindexonline/react-resize
 ```
@@ -24,11 +24,11 @@
 import {
-  Reresize,
-  ReresizeProvider,
-  useReresize,
-} from "@primaryindexonline/reresize";
+  Resize,
+  ResizeProvider,
+  useResize,
+} from "@primaryindexonline/react-resize";
 ```
 
-1. `Reresize` — class where all the logic lives;
-2. `ReresizeProvider` — wrapper for `React` if you want to apply multiple subsribers;
-3. `useReresize` — hook to access `Reresize` instance once your app is wrapped with `ReresizeProvider`.
+1. `Resize` — class where all the logic lives;
+2. `ResizeProvider` — wrapper for `React` if you want to apply multiple subsribers;
+3. `useResize` — hook to access `Resize` instance once your app is wrapped with `ResizeProvider`.
 
@@ -40,5 +40,5 @@ ---
 ```ts
-import { Reresize } from "@primaryindexonline/reresize";
+import { Resize } from "@primaryindexonline/react-resize";
 
-const reresizeInstance = new Reresize();
+const resizeInstance = new Resize();
 
@@ -48,3 +48,3 @@ const movingElement = document.getElementById("movingElement");
 
-const reresizeDummy = reresizeInstance.init("dummy", {
+const resizeDummy = resizeInstance.create("dummy", {
   handlerElement,
@@ -54,3 +54,3 @@ movingElement,
 
-reresizeDummy.addListener((newWidth) => {
+resizeDummy.addListener((newWidth) => {
   movingElement.style.width = `${newWidth}px`;
@@ -63,7 +63,7 @@ });
 ```ts
-const reresizeInstance = new Reresize();
+const resizeInstance = new Resize();
 
 ...
 
-const reresizeDummy = reresizeInstance.init("dummy", {
+const resizeDummy = resizeInstance.create("dummy", {
   handlerElement,
@@ -75,3 +75,3 @@ movingElement
 
-reresizeInstance.addListener("dummy", (newWidth) => {
+resizeInstance.addListener("dummy", (newWidth) => {
  // apply "newWidth"
@@ -90,3 +90,3 @@ })
 import { useMemo } from "react";
-import { Reresize, ReresizeProvider } from "@primaryindexonline/reresize";
+import { Resize, ResizeProvider } from "@primaryindexonline/react-resize";
 
@@ -97,9 +97,9 @@ import MainConsumer from "./components/mainConsumer";
 export default function Entry() {
-  const reresize = useMemo(() => new Reresize(), []);
+  const resize = useMemo(() => new Resize(), []);
 
   return (
-    <ReresizeProvider value={reresize}>
+    <ResizeProvider value={resize}>
       <MainConsumer />
       <OtherConsumer />
-    </ReresizeProvider>
+    </ResizeProvider>
   );
@@ -113,6 +113,6 @@ }
 import { useEffect, useState, useCallback } from "react";
-import { useReresize } from "@primaryindexonline/reresize";
+import { useResize } from "@primaryindexonline/react-resize";
 
 export default function MainConsumer() {
-  const reresize = useReresize();
+  const resize = useResize();
 
@@ -124,3 +124,3 @@ const [handlerElement, setHandlerElement] = useState<HTMLDivElement>();
     if (handlerElement && movingElement) {
-      const reresizeDummy = reresize.init("dummy", {
+      const resizeDummy = resize.create("dummy", {
         handlerElement,
@@ -130,3 +130,3 @@ movingElement
 
-      reresizeDummy.addListener((newWidth) => {
+      resizeDummy.addListener((newWidth) => {
         movingElement.style.width = `${newWidth}px`;
@@ -136,3 +136,3 @@ });
       return () => {
-        reresizeDummy.removeListeners();
+        resizeDummy.removeListeners();
       };
@@ -182,6 +182,6 @@ }
 
-import { useReresize } from "@primaryindexonline/reresize";
+import { useResize } from "@primaryindexonline/react-resize";
 
 export default function OtherConsumer() {
-  const reresize = useReresize();
+  const resize = useResize();
 
@@ -196,3 +196,3 @@ const [movingElement, setMovingElement] = useState<HTMLDivElement>();
     if (movingElement) {
-      reresize.addListener("dummy", (newWidth) => {
+      resize.addListener("dummy", (newWidth) => {
         movingElement.style.width = `${newWidth}px`;
@@ -199,0 +199,0 @@ });

No alert changes

Worsened metrics

Total package byte prevSize

22108

decreased by-0.2%

No dependency changes