{"id":17194372,"url":"https://github.com/mauris/react-lh","last_synced_at":"2025-04-13T20:12:34.730Z","repository":{"id":57333855,"uuid":"182218607","full_name":"mauris/react-lh","owner":"mauris","description":"📣 React Loud Hailer: message passing and state management for React","archived":false,"fork":false,"pushed_at":"2020-06-09T23:23:23.000Z","size":173,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T10:47:07.767Z","etag":null,"topics":["components","library","message-passing","nodejs","npm","npm-package","react","react-components","reactjs","reactjs-components","state-management"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-lh","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/mauris.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":"2019-04-19T07:05:00.000Z","updated_at":"2023-08-25T20:29:42.000Z","dependencies_parsed_at":"2022-08-29T14:30:46.926Z","dependency_job_id":null,"html_url":"https://github.com/mauris/react-lh","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mauris%2Freact-lh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mauris%2Freact-lh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mauris%2Freact-lh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mauris%2Freact-lh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mauris","download_url":"https://codeload.github.com/mauris/react-lh/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248774977,"owners_count":21159534,"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":["components","library","message-passing","nodejs","npm","npm-package","react","react-components","reactjs","reactjs-components","state-management"],"created_at":"2024-10-15T01:46:49.791Z","updated_at":"2025-04-13T20:12:34.711Z","avatar_url":"https://github.com/mauris.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Loud Hailer `react-lh`\n\n[![Build Status](https://travis-ci.org/mauris/react-lh.svg?branch=master)](https://travis-ci.org/mauris/react-lh) [![peerDependencies Status](https://david-dm.org/mauris/react-lh/peer-status.svg)](https://david-dm.org/mauris/react-lh?type=peer) [![dependencies Status](https://david-dm.org/mauris/react-lh/status.svg)](https://david-dm.org/mauris/react-lh) [![npm bundle size](https://img.shields.io/bundlephobia/min/react-lh.svg?style=popout)](https://www.npmjs.com/package/react-lh) [![npm](https://img.shields.io/npm/dt/react-lh.svg?style=popout)](https://www.npmjs.com/package/react-lh)\n\nPublish/subscribe implementation for efficient message passing between [React](https://reactjs.org/) components.\n\n## Install\n\nTo install `react-lh` with your existing React app, run either:\n\n    $ npm install --save react-lh\n\nor if using Yarn:\n\n    $ yarn add react-lh\n\n## Usage\n\n_Recommended_: [Example Todo App on JSFiddle](https://jsfiddle.net/mauris/bzwm9f0n/) - The Todo App example demonstrates how facilitate inter-component communications and enable decoupling between them.\n\nThe following examples uses the ECMA 9 features. If you wish to use it in CommonJS module system (i.e. in Node.js natively), you need to use `require()` like so:\n\n```javascript\nconst reactlh = require('react-lh');\nconst loudHailer = reactlh.loudHailer;\n```\n\nor concisely as:\n\n```javascript\nconst { loudHailer } = require('react-lh');\n```\n\nAfter installing `react-lh` to your React app, you need to wrap components that you wish to access the Loud Hailer API with the `loudHailer()` function like that:\n\n```javascript\nimport React, { Component } from 'react';\nimport loudHailer from 'react-lh';\n\nclass MyComponent extends Component {\n  componentDidMount() {\n    const { channel } = this.props;\n\n    channel.on('SomeOtherActionOccurred', () =\u003e {\n      // a function that executes whenever the event\n      // \"SomeOtherActionOccurred\" is fired\n    });\n  }\n\n  renderButtonClickHandler() {\n    return () =\u003e {\n      const { channel } = this.props;\n\n      // fires the event \"ButtonClicked\"\n      channel.emit('ButtonClicked');\n    };\n  }\n\n  render() {\n    return \u003cbutton onClick={this.renderButtonClickHandler()}\u003ePress me\u003c/button\u003e;\n  }\n}\n\n// wrap the component using Loud Hailer before exporting\nexport default loudHailer(MyComponent);\n```\n\nIn the case of a function component:\n\n```javascript\nimport React from 'react';\nimport loudHailer from 'react-lh';\n\nfunction FuncComponent(props) {\n  const { channel } = props;\n\n  const buttonClickHandler = () =\u003e {\n    channel.emit('ButtonClicked');\n  };\n\n  return \u003cbutton onClick={buttonClickHandler}\u003ePress me\u003c/button\u003e;\n}\n\n// wrap the component using Loud Hailer before exporting\nexport default loudHailer(FuncComponent);\n```\n\nBy default, the Loud Hailer API will be accessible through the `channel` props property. The property name can be changed by passing an option to Loud Hailer wrapper's second options argument like this:\n\n```javascript\nimport React from 'react';\nimport loudHailer from 'react-lh';\n\nfunction FuncComponent(props) {\n  // notice that \"pipe\" is used here\n  const { pipe } = props;\n\n  const buttonClickHandler = () =\u003e {\n    pipe.emit('ButtonClicked');\n  };\n\n  // ...\n}\n\nconst options = {\n  property: 'pipe',\n};\nexport default loudHailer(FuncComponent, options);\n```\n\nYou can even further simplify your component as such:\n\n```javascript\nimport React from 'react';\nimport loudHailer from 'react-lh';\n\nexport default loudHailer(({ channel }) =\u003e {\n  const buttonClickHandler = () =\u003e {\n    channel.emit('ButtonClicked');\n  };\n\n  return \u003cbutton onClick={buttonClickHandler}\u003ePress me\u003c/button\u003e;\n});\n```\n\n### React Hooks\n\nWith the introduction of hooks in React 16.8 or later, you can use `react-lh`'s React Hooks:\n\n- `useChannel`\n- `useLoudHailer`\n- `useOnEvent`\n- `useOnceEvent`\n\n```javascript\nimport React, { useState } from 'react';\nimport { useLoudHailer } from 'react-lh';\n\nexport default (props) =\u003e {\n  const [value, setValue] = useState('none');\n\n  useLoudHailer((channel) =\u003e {\n    channel.on('valueGiven', (newValue) =\u003e {\n      setValue(newValue);\n    });\n  }, []);\n\n  return \u003cspan\u003e{`The value given was: ${value}`}\u003c/span\u003e;\n};\n```\n\nOr more concisely using `useOnEvent`:\n\n```javascript\nimport React, { useState } from 'react';\nimport { useOnEvent } from 'react-lh';\n\nexport default (props) =\u003e {\n  const [value, setValue] = useState('none');\n\n  useOnEvent(\n    'valueGiven',\n    (newValue) =\u003e {\n      setValue(newValue);\n    },\n    []\n  );\n\n  return \u003cspan\u003e{`The value given was: ${value}`}\u003c/span\u003e;\n};\n```\n\n### Cross-Window Event Propagation\n\nIt is possible for events emitted by components on one window to be propagated to another window through React Loud Hailer. This is made possible by browsers' localStorage API implementation. To enable this feature, you need to wrap your top-most component (e.g. `App`) with the Loud Hailer CrossWindow component like this:\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { CrossWindow } from 'react-lh';\n\nimport App from './App';\n\nconst channels = ['default'];\n\nReactDOM.render(\n  \u003cCrossWindow channels={channels}\u003e\n    \u003cApp /\u003e\n  \u003c/CrossWindow\u003e,\n  document.getElementById('root')\n);\n```\n\nThe `channels` property indicate which channels can be communicated across all the open windows of your website. The default channel namespace is `'default'`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmauris%2Freact-lh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmauris%2Freact-lh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmauris%2Freact-lh/lists"}