{"id":21592965,"url":"https://github.com/jonabrams/friendlyfire","last_synced_at":"2025-03-18T10:28:30.516Z","repository":{"id":57159565,"uuid":"83171300","full_name":"JonAbrams/FriendlyFire","owner":"JonAbrams","description":"Simple pubsub/event system for React component communication","archived":false,"fork":false,"pushed_at":"2017-02-27T06:14:20.000Z","size":6,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T07:10:00.407Z","etag":null,"topics":[],"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/JonAbrams.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}},"created_at":"2017-02-25T23:56:35.000Z","updated_at":"2024-02-21T13:02:57.000Z","dependencies_parsed_at":"2022-09-08T13:32:11.638Z","dependency_job_id":null,"html_url":"https://github.com/JonAbrams/FriendlyFire","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2FFriendlyFire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2FFriendlyFire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2FFriendlyFire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2FFriendlyFire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JonAbrams","download_url":"https://codeload.github.com/JonAbrams/FriendlyFire/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244201167,"owners_count":20415026,"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":[],"created_at":"2024-11-24T17:10:42.397Z","updated_at":"2025-03-18T10:28:30.460Z","avatar_url":"https://github.com/JonAbrams.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FriendlyFire\n\nEasy cross-component communication using pubsub, designed for React. No dependencies.\n\n## Why?\n\nReact provides a built-in mechanism for parent components to communicate with child components: props.\nIn order to allow components to communicate with parent, sibling, or unrelated components, the are various solutions;\nmost famously Flux. While it's a great solution, especially for large and complex projects, it requires a lot\nof boilerplate code, and spreads logic across many files. Perhaps most annoying of all, it requires parent\ncomponents to send callback handlers to children, sometimes over many generations.\n\nUsing FriendlyFire, components easily subscribe to events triggered by other components. Components\nthat trigger events don't need to know what will consume them, they don't need to add extra props for callbacks.\n\nJust by looking at a component's subscription methods, you can easily tell which events, emitted by\na particular component, it subscribes to. The emitting components on the other hand, need not care who subscribes.\n\nThis model of communication enables modularity/portability of components, reducing the dependencies of components\non each other, making component dependency exist in only one direction, from parent to child.\n\n## Example\n\n```javascript\nimport ff from 'friendlyfire';\n\nclass ModalShower extends React.Component {\n  constructor() {\n    super();\n    this.state = { modalOpen: false };\n  }\n\n  componentDidMount() {\n    ff.init(this); // Register with FriendlyFire to have subscribers registered\n  }\n\n  // Auto-subscribes to 'close' event from Modal components\n  onModalClose() {\n    this.setState({ modalOpen: false });\n  }\n\n  render() {\n    return(\n      \u003cdiv\u003e\n        \u003cbutton onClick={this.openModal.bind(this)}\u003eOpen Modal\u003c/button\u003e\n        \u003cModal open={this.state.modalOpen}\u003e\n          Contents of modal\n        \u003c/Modal\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nclass Modal extends React.Component {\n  componentDidMount() {\n    ff.init(this); // Register with FriendlyFire to make trigger(…) method available\n  }\n\n  handleOuterClick(e) {\n    if (e.target === e.currentTarget) {\n      this.trigger('close');\n    }\n  }\n\n  render() {\n    return (\n      \u003cdiv className='outerModal'\n        onClick={this.handleOuterClick.bind(this)}\n      \u003e\n        \u003cdiv className='innerModal'\u003e\n          \u003cdiv className='closeButton' onClick={this.handleOuterClick.bind(this)}\u003e\n            {this.props.children}\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n## API\n\n### ff.init(_component_)\n\nInitializes a react component to be able to publish and subscribe using FriendlyFire.\n\nRecommended that you put this into `componentDidMount` and pass in `this` as the parameter.\n\nAdd `trigger` and will scan the components' methods looking potential subscribers, and use them.\n\n### \u0026lt;component\u003e.trigger(_eventName_)\n\nWill fire any subscribers listening for the specified event from the triggering component.\n\n### \u0026lt;component\u003e.onComponentNameEventname(data)\n\nTo register a subscriber on a component, create a method on it using the above pattern. The above example will fire when another component in the same app called `ComponentName` fires the event `eventname`.\n\nNote: The event specified needs to be all lowercase (with the exception of the first character).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonabrams%2Ffriendlyfire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonabrams%2Ffriendlyfire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonabrams%2Ffriendlyfire/lists"}