use-propagate - npm Package Compare versions

Comparing version 0.0.1-main.42c4dc5 to 0.0.1-main.af24127

package.json

 {
   "name": "use-propagate",
-  "version": "0.0.1-main.42c4dc5",
+  "version": "0.0.1-main.af24127",
   "description": "Propagates an event to multiple subscribers using React hooks.",
@@ -81,5 +81,5 @@ "files": [
     "@babel/runtime-corejs3": "^7.24.1",
-    "use-propagate": "^0.0.1-main.42c4dc5",
+    "use-propagate": "^0.0.1-main.af24127",
     "use-ref-from": "^0.0.3"
   }
 }

README.md

 # `use-propagate`
 
-Propagates an event to multiple subscribers using React hooks.
+Propagates a value to multiple nodes via callback function using React context and hooks.
 
 ## Background
 
-This pattern is useful for propagating an event to multiple nodes via a callback mechanism.
+This pattern is useful for triggering multiple nodes via callback function.
 
-Unlike setting a value in a [context](https://react.dev/reference/react/createContext), data will be passed via callback function. Subscribe can save the value into state and re-render.
+Unlike setting a value in a [context](https://react.dev/reference/react/createContext), invoking a callback function will not trigger re-render. Subscribers can choose to save the value into its state and re-render as needed.
 
@@ -15,3 +15,3 @@ ## How to use
 
-The following code snippet would send the focus to the text box when the button is tapped.
+The following code snippet sends the focus to the text box when the button is tapped.
 
@@ -61,3 +61,3 @@ ```tsx
 export function createPropagation<T>(): {
-  Provider: ComponentType;
+  Provider: ComponentType<{ children?: ReactNode | undefined }>;
   useListen: (callback: (value: T) => void) => void;
@@ -76,16 +76,16 @@ usePropagate: (value: T) => void;
 
-Modifies the passing value by following the [`FetchEvent.respondWith` pattern](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/respondWith) or [`ExtendableEvent.waitUntil` pattern](https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent/waitUntil).
+Modifies the passing value by following the [`FetchEvent.respondWith`](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/respondWith) or [`ExtendableEvent.waitUntil`](https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent/waitUntil) pattern.
 
 ### How to re-render when triggered?
 
-Use the following code snippet to save the value to a state, which will cause a re-render.
+Use the following code snippet to save the value to a state, which will rerender the component.
 
 ```tsx
 const MyComponent = () => {
-  const [value, setValue] = useState();
+  const [value, setValue] = useState<number>();
 
   // When triggered, saves the value to state.
-  useListen(value => setValue(value));
+  useListen(setValue);
 
-  return (<p>The value is {value}</p>.
+  return <p>The value is {value}.</p>
 };
@@ -92,0 +92,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

29112

increased by0.25%

Dependency changes

• Updateduse-propagate@^0.0.1-main.af24127