{"id":17992942,"url":"https://github.com/leostera/react-usemailbox","last_synced_at":"2025-03-26T01:31:35.475Z","repository":{"id":141534935,"uuid":"190483968","full_name":"leostera/react-useMailbox","owner":"leostera","description":":mailbox: A small React hook to turn your components into \"Actors\".","archived":false,"fork":false,"pushed_at":"2019-06-06T00:09:58.000Z","size":212,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T01:11:08.702Z","etag":null,"topics":["actor-model","actors","hooks","message-passing","react","react-hooks"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leostera.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-06-05T23:45:06.000Z","updated_at":"2021-03-17T07:33:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"ff2f39dc-3624-4284-a9d8-1375677b5e08","html_url":"https://github.com/leostera/react-useMailbox","commit_stats":null,"previous_names":["leostera/react-usemailbox"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leostera%2Freact-useMailbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leostera%2Freact-useMailbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leostera%2Freact-useMailbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leostera%2Freact-useMailbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leostera","download_url":"https://codeload.github.com/leostera/react-useMailbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245571844,"owners_count":20637411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["actor-model","actors","hooks","message-passing","react","react-hooks"],"created_at":"2024-10-29T20:09:41.355Z","updated_at":"2025-03-26T01:31:35.093Z","avatar_url":"https://github.com/leostera.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useMailbox 📬\n\u003e A small React hook to turn your components into \"Actors\".\n\nStatus: _experimental_.\n\nThis is really just a proof of concept that late-binding and asynchronouse\nmessage-passing on top of React Hooks is possible, albeit a clunky.\n\nHere's 3 components, communicating via message passing where a Span has a\nmailbox and processes messages to display text, and to uppercase text.\n\n\u003cimg src=\"https://media.giphy.com/media/lqkMptDWhT2UV0SrUg/giphy.gif\" /\u003e\n\n#### Why is this useful?\nWell, for starters it lets you structure your\napplications without being tied to your component hierarchy. That is, you can\nsort of organize your components in whatever way makes most sense, and if you\nwant to you can have all of your application as a bunch of sibling components.\n\n## Sample Usage\n\n```js\nimport * as Actors from 'react-useMailbox';\n\nconst Label = ({ pid }) =\u003e {\n  const [state, setState] = useState({ text: \"unset\" });\n  Actors.useMailbox(pid, message =\u003e {\n    if (message.type === \"set-value\") {\n      setState({ text: message.value });\n    }\n    if (message.type === \"uppercase\") {\n      setState({ text: state.text.toUpperCase() });\n    }\n  });\n  return \u003cspan\u003e{state.text}\u003c/span\u003e;\n};\n\n// render it first...\n\nActors.send(\"some-identifier\", {type: \"set-value\", value: \"hello!\" });\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleostera%2Freact-usemailbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleostera%2Freact-usemailbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleostera%2Freact-usemailbox/lists"}