https://github.com/leostera/react-usemailbox
:mailbox: A small React hook to turn your components into "Actors".
https://github.com/leostera/react-usemailbox
actor-model actors hooks message-passing react react-hooks
Last synced: 7 months ago
JSON representation
:mailbox: A small React hook to turn your components into "Actors".
- Host: GitHub
- URL: https://github.com/leostera/react-usemailbox
- Owner: leostera
- Created: 2019-06-05T23:45:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-06T00:09:58.000Z (over 6 years ago)
- Last Synced: 2025-03-21T01:11:08.702Z (7 months ago)
- Topics: actor-model, actors, hooks, message-passing, react, react-hooks
- Language: JavaScript
- Homepage:
- Size: 207 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# useMailbox 📬
> A small React hook to turn your components into "Actors".
Status: _experimental_.
This is really just a proof of concept that late-binding and asynchronouse
message-passing on top of React Hooks is possible, albeit a clunky.
Here's 3 components, communicating via message passing where a Span has a
mailbox and processes messages to display text, and to uppercase text.
#### Why is this useful?
Well, for starters it lets you structure your
applications without being tied to your component hierarchy. That is, you can
sort of organize your components in whatever way makes most sense, and if you
want to you can have all of your application as a bunch of sibling components.
## Sample Usage
```js
import * as Actors from 'react-useMailbox';
const Label = ({ pid }) => {
const [state, setState] = useState({ text: "unset" });
Actors.useMailbox(pid, message => {
if (message.type === "set-value") {
setState({ text: message.value });
}
if (message.type === "uppercase") {
setState({ text: state.text.toUpperCase() });
}
});
return {state.text};
};
// render it first...
Actors.send("some-identifier", {type: "set-value", value: "hello!" });
```