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 @@ ```

use-propagate - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Dependency changes