
Security News
Bun 1.2.19 Adds Isolated Installs for Better Monorepo Support
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.
use-propagate
Advanced tools
use-propagate
Propagates a value to multiple nodes via callback function using React context and hooks.
This pattern is useful for triggering multiple nodes via callback function.
Unlike setting a value in a context, invoking a callback function will not trigger re-render. Subscribers can choose to save the value into its state and re-render as needed.
The following code snippet sends the focus to the text box when the button is tapped.
import { createPropagation } from 'use-propagate';
// Creates a namespace for the propagation. This should be placed outside of the component.
const { useListen, usePropagate } = createPropagation<void>();
const FocusButton = () => {
const propagate = usePropagate();
// When tapped, it will trigger all subscribers.
const handleClick = useCallback(() => propagate(), [propagate]);
return (
<button autoFocus={true} onClick={handleClick}>
Tap to focus to the text box
</button>
);
};
const TextBox = () => {
const ref = useRef<HTMLInputElement>(null);
// When the callback is called, send the focus to the text box.
const handleListen = useCallback(() => ref.current?.focus(), [ref]);
// Listens to the propagation.
useListen(handleListen);
return <input ref={ref} type="text" />;
};
render(
<Fragment>
<FocusButton />
<TextBox />
</Fragment>
);
The PropagationScope
component allows you to create isolated scopes for propagation. This is useful when you want to limit the scope of propagation to a specific part of your component tree.
Here's an example of how to use PropagationScope
:
import { createPropagation } from 'use-propagate';
const { useListen, usePropagate, PropagationScope } = createPropagation<string>();
const ParentComponent = () => {
return (
<div>
<PropagationScope>
<ChildComponent1 />
<ChildComponent2 />
</PropagationScope>
<ChildComponent3 />
</div>
);
};
const ChildComponent1 = () => {
const propagate = usePropagate();
return <button onClick={() => propagate('Hello')}>Say Hello</button>;
};
const ChildComponent2 = () => {
useListen((message) => {
console.log('ChildComponent2 received:', message);
});
return <div>Child 2</div>;
};
const ChildComponent3 = () => {
useListen((message) => {
console.log('ChildComponent3 received:', message);
});
return <div>Child 3</div>;
};
In this example:
ChildComponent1
and ChildComponent2
are wrapped in a PropagationScope
.ChildComponent1
is clicked, it will propagate the message "Hello".ChildComponent2
will receive this message and log it.ChildComponent3
, which is outside the PropagationScope
, will not receive the message.Using PropagationScope
allows you to create multiple isolated propagation contexts within your application. This can be particularly useful in larger applications where you want to avoid unintended propagation between different parts of your component tree.
Note that useListen
and usePropagate
will use the nearest PropagationScope
in the component tree. If there's no PropagationScope
ancestor, they will use a default global scope.
export function createPropagation<T>(options?: { allowPropagateDuringRender?: boolean }): {
PropagationScope: React.ComponentType<{ children?: React.ReactNode | undefined }>;
useListen: (callback: (value: T) => void) => void;
usePropagate: () => (value: T) => void;
};
useContext
?When propagating a value via useContext
, subscribing nodes will be re-rendered. This behavior may not be desirable for events and certain type of scenarios.
When the propagate callback function is called during rendering, a warning message will be printed and propagation will be stopped.
This is a safety measure to prevent multiple re-render and potential deadlock situation if listeners save the value to a state and trigger another re-render.
If listeners are controlled and would never trigger re-render, you can pass allowPropagateDuringRender: true
option to ignore this safety measure.
Modifies the passing value by following the FetchEvent.respondWith
or ExtendableEvent.waitUntil
pattern.
Use the following code snippet to save the value to a state, which will re-render the component.
const MyComponent = () => {
const [value, setValue] = useState<number>();
// When triggered, saves the value to state.
useListen(setValue);
return <p>The value is {value}.</p>;
};
Please make sure the propagate callback function is not called during render as it could cause multiple re-render and potential deadlock situation.
Like us? Star us.
Want to make it better? File us an issue.
Don't like something you see? Submit a pull request.
[0.2.1] - 2025-02-14
@babel/preset-env@7.25.8
@babel/preset-react@7.25.7
@babel/preset-typescript@7.25.7
@testing-library/dom@10.4.0
@testing-library/react@16.0.1
@tsconfig/recommended@1.0.7
@types/jest@29.5.13
@types/react@18.3.11
@types/react-dom@18.3.1
@typescript-eslint/eslint-plugin@8.8.1
@typescript-eslint/parser@8.8.1
esbuild@0.24.0
eslint@9.12.0
eslint-plugin-prettier@5.2.1
eslint-plugin-react@7.37.1
prettier@3.3.3
tsup@8.3.0
typescript@5.6.3
usePropagate
hook to return a stable function reference across re-renders, in PR #23, by @OEvgenyFAQs
Propagates an event to multiple subscribers using React hooks.
The npm package use-propagate receives a total of 5,601 weekly downloads. As such, use-propagate popularity was classified as popular.
We found that use-propagate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.