├── .editorconfig ├── .github ├── ISSUE_TEMPLATE │ └── bug_report.md └── workflows │ └── workflow.yml ├── .gitignore ├── .netlify └── state.json ├── .nojekyll ├── .nvmrc ├── .prettierrc ├── .travis.yml ├── .vscode └── launch.json ├── CHANGELOG.md ├── README.md ├── _config.yml ├── babel.config.js ├── docs ├── assets │ ├── css │ │ └── main.css │ ├── images │ │ ├── icons.png │ │ ├── icons@2x.png │ │ ├── widgets.png │ │ └── widgets@2x.png │ └── js │ │ ├── main.js │ │ └── search.json ├── globals.html ├── index.html ├── interfaces │ └── _core_usepresencechannel_.usepresencechannelvalue.html └── modules │ ├── _core_pusherprovider_.html │ ├── _core_usechannel_.html │ ├── _core_useclienttrigger_.html │ ├── _core_useevent_.html │ ├── _core_usepresencechannel_.html │ ├── _core_usepusher_.html │ ├── _core_usetrigger_.html │ ├── _native_pusherprovider_.html │ ├── _testutils_.html │ └── _web_pusherprovider_.html ├── examples ├── native-use-pusher-example │ ├── .buckconfig │ ├── .gitattributes │ ├── .gitignore │ ├── App.js │ ├── PusherExample.js │ ├── __tests__ │ │ └── App.js │ ├── android │ │ ├── app │ │ │ ├── BUCK │ │ │ ├── build.gradle │ │ │ ├── build_defs.bzl │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ ├── debug │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java │ │ │ │ │ └── com │ │ │ │ │ └── nativeusepusherexample │ │ │ │ │ └── ReactNativeFlipper.java │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── nativeusepusherexample │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ ├── MainApplication.java │ │ │ │ │ └── generated │ │ │ │ │ └── BasePackageList.java │ │ │ │ └── res │ │ │ │ ├── drawable │ │ │ │ ├── splashscreen.xml │ │ │ │ └── splashscreen_image.png │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── colors.xml │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ └── settings.gradle │ ├── app.json │ ├── babel.config.js │ ├── index.js │ ├── ios │ │ ├── Podfile │ │ ├── Podfile.lock │ │ ├── nativeusepusherexample.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ └── nativeusepusherexample.xcscheme │ │ ├── nativeusepusherexample.xcworkspace │ │ │ └── contents.xcworkspacedata │ │ └── nativeusepusherexample │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ ├── Contents.json │ │ │ ├── SplashScreen.imageset │ │ │ │ ├── Contents.json │ │ │ │ └── splashscreen.png │ │ │ └── SplashScreenBackground.imageset │ │ │ │ ├── Contents.json │ │ │ │ └── background.png │ │ │ ├── Info.plist │ │ │ ├── SplashScreen.storyboard │ │ │ ├── Supporting │ │ │ └── Expo.plist │ │ │ └── main.m │ ├── metro.config.js │ ├── package.json │ └── use-pusher │ │ └── native │ │ ├── index.js │ │ └── index.js.map └── web │ ├── .eslintignore │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js │ └── yarn.lock ├── jest.config.js ├── jest.rn.config.js ├── package.json ├── rn-cli.config.js ├── rollup.config.js ├── setupTests.js ├── setupTests.rn.js ├── src ├── __tests__ │ ├── PusherProvider.test.tsx │ ├── useChannel.tsx │ ├── useClientTrigger.tsx │ ├── useEvent.tsx │ ├── usePresenceChannel.tsx │ ├── usePusher.test.tsx │ └── useTrigger.tsx ├── core │ ├── ChannelsProvider.tsx │ ├── PusherProvider.tsx │ ├── types.d.ts │ ├── useChannel.ts │ ├── useChannels.tsx │ ├── useClientTrigger.ts │ ├── useEvent.ts │ ├── usePresenceChannel.ts │ ├── usePusher.ts │ └── useTrigger.ts ├── native │ ├── PusherProvider.tsx │ └── index.ts ├── react-app-env.d.ts ├── setupTests.js ├── testUtils.tsx └── web │ ├── PusherProvider.tsx │ └── index.ts ├── tsconfig.json ├── tsconfig.rn.json ├── tsconfig.test.json ├── typedoc.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | quote_type = double 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | ### Please provide a codesandbox of your issue or I will not be able to diagnose and fix it. 15 | -------------------------------------------------------------------------------- /.github/workflows/workflow.yml: -------------------------------------------------------------------------------- 1 | name: "🚀 CI Workflow" 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | workflow_call: {} 8 | pull_request: {} 9 | 10 | jobs: 11 | test: 12 | name: 🃏 Test 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: 🛑 Cancel Previous Runs 16 | uses: styfle/cancel-workflow-action@0.9.1 17 | 18 | - name: ⬇️ Checkout repo 19 | uses: actions/checkout@v3 20 | 21 | - name: ⎔ Setup node 22 | uses: actions/setup-node@v3 23 | with: 24 | cache: "yarn" 25 | node-version: 16 26 | 27 | - name: 📥 Download deps 28 | run: yarn install 29 | 30 | - name: 🃏 Test 31 | run: yarn test 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See https://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | node_modules 6 | 7 | # builds 8 | coverage 9 | build 10 | dist 11 | /react-native 12 | .rpt2_cache 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | # jest artifacts, i.e. cache 23 | .jest 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | 29 | # Local Netlify folder 30 | .netlify -------------------------------------------------------------------------------- /.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "aa919ed6-b843-411b-b6f7-828ea279b040" 3 | } -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayteio/use-pusher/f9f2389db01d3c102f31b43045325967d96ba342/.nojekyll -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v12 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "jsxSingleQuote": false, 5 | "singleQuote": false, 6 | "arrowParens": "always", 7 | "bracketSpacing": true 8 | } 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 9 4 | - 8 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "type": "node", 6 | "request": "launch", 7 | "name": "Jest All", 8 | "program": "${workspaceFolder}/node_modules/.bin/jest", 9 | "args": ["--runInBand"], 10 | "console": "integratedTerminal", 11 | "internalConsoleOptions": "neverOpen", 12 | "disableOptimisticBPs": true, 13 | "windows": { 14 | "program": "${workspaceFolder}/node_modules/jest/bin/jest" 15 | } 16 | }, 17 | { 18 | "type": "node", 19 | "request": "launch", 20 | "name": "Jest Current File", 21 | "program": "${workspaceFolder}/node_modules/.bin/jest", 22 | "args": ["${fileBasenameNoExtension}", "--config", "jest.config.js"], 23 | "console": "integratedTerminal", 24 | "internalConsoleOptions": "neverOpen", 25 | "disableOptimisticBPs": true, 26 | "windows": { 27 | "program": "${workspaceFolder}/node_modules/jest/bin/jest" 28 | } 29 | } 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `@harelpls/use-pusher` 2 | 3 | > Easy as [React hooks](https://reactjs.org/docs/hooks-intro.html) that integrate with the [`pusher-js`](https://github.com/pusher/pusher-js) library. 4 | 5 | [![NPM](https://img.shields.io/npm/v/@harelpls/use-pusher.svg)](https://www.npmjs.com/package/@harelpls/use-pusher) ![Typed](https://badgen.net/badge//types/Typescript?icon=typescript) 6 | 7 | 8 | 9 | 10 | - [Install](#install) 11 | - [Hooks](#hooks) 12 | - [Usage](#usage) 13 | - [`useChannel`](#usechannel) 14 | - [`usePresenceChannel`](#usepresencechannel) 15 | - [`useEvent`](#useevent) 16 | - [`useTrigger`](#usetrigger) 17 | - [`usePusher`](#usepusher) 18 | - [Trigger Server](#trigger-server) 19 | - [`useClientTrigger`](#useclienttrigger) 20 | - [Typescript](#typescript) 21 | - [Testing](#testing) 22 | - [React Native](#react-native) 23 | - [Contributing](#contributing) 24 | - [License](#license) 25 | 26 | 27 | 28 | ## [API Reference/Docs](https://use-pusher-docs.netlify.com/) 29 | 30 | ## Install 31 | 32 | ```bash 33 | yarn add @harelpls/use-pusher 34 | ``` 35 | 36 | ## Hooks 37 | 38 | - [`useChannel`](#usechannel) 39 | - [`usePresenceChannel`](#usepresencechannel) 40 | - [`useEvent`](#useevent) 41 | - [`useTrigger`](#usetrigger) 42 | - [`useClientTrigger`](#useclienttrigger) 43 | - [`usePusher`](#usepusher) 44 | 45 | ## Usage 46 | 47 | You must wrap your app with a `PusherProvider` and pass it config props for [`pusher-js`](https://github.com/pusher/pusher-js) initialisation. 48 | 49 | ```typescript 50 | import React from "react"; 51 | import { PusherProvider } from "@harelpls/use-pusher"; 52 | 53 | const config = { 54 | // required config props 55 | clientKey: "client-key", 56 | cluster: "ap4", 57 | 58 | // optional if you'd like to trigger events. BYO endpoint. 59 | // see "Trigger Server" below for more info 60 | triggerEndpoint: "/pusher/trigger", 61 | 62 | // required for private/presence channels 63 | // also sends auth headers to trigger endpoint 64 | authEndpoint: "/pusher/auth", 65 | auth: { 66 | headers: { Authorization: "Bearer token" }, 67 | }, 68 | }; 69 | 70 | // Wrap app in provider 71 | const App = () => { 72 | 73 | 74 | ; 75 | }; 76 | ``` 77 | 78 | ## `useChannel` 79 | 80 | Use this hook to subscribe to a channel. 81 | 82 | ```typescript 83 | // returns channel instance. 84 | const channel = useChannel("channel-name"); 85 | ``` 86 | 87 | ## `usePresenceChannel` 88 | 89 | Augments a regular channel with member functionality. 90 | 91 | ```typescript 92 | const Example = () => { 93 | const { members, myID } = usePresenceChannel('presence-awesome'); 94 | 95 | return ( 96 | 106 | ) 107 | } 108 | ``` 109 | 110 | ## `useEvent` 111 | 112 | Bind to events on a channel with a callback. 113 | 114 | ```typescript 115 | const Example = () => { 116 | const [message, setMessages] = useState(); 117 | const channel = useChannel("channel-name"); 118 | useEvent(channel, "message", ({ data }) => 119 | setMessages((messages) => [...messages, data]) 120 | ); 121 | }; 122 | ``` 123 | 124 | _Note_: This will bind and unbind to the event on each render. You may want to memoise your callback with `useCallback` before passing it in if you notice performance issues. 125 | 126 | ## `useTrigger` 127 | 128 | A helper function to create a **server triggered** event. BYO server (See [Trigger Server](#trigger-server) below). Pass in `triggerEndpoint` prop to ``. Any auth headers from `config.auth.headers` automatically get passed to the `fetch` call. 129 | 130 | ```typescript 131 | import { useTrigger } from '@harelpls/use-pusher'; 132 | 133 | const Example = () => { 134 | const trigger = useTrigger("channel-name"); 135 | const handleClick = () => 136 | trigger("event-name", "hello"); 137 | 138 | return ( 139 | 140 | ) 141 | } 142 | ``` 143 | 144 | ## `usePusher` 145 | 146 | Get access to the Pusher instance to do other things. 147 | 148 | ```typescript 149 | import { usePusher } from "@harelpls/use-pusher"; 150 | 151 | const Example = () => { 152 | const { client } = usePusher(); 153 | client.log("Look ma, logs!"); 154 | 155 | return null; 156 | }; 157 | ``` 158 | 159 | ## Trigger Server 160 | 161 | In order to trigger an event, you'll have to create a simple lambda (or an express server if that's your thing). Below is a short lambda that can handle triggered events from `useTrigger`. 162 | 163 | ```typescript 164 | import Pusher from "pusher"; 165 | 166 | const pusher = new Pusher({ 167 | appId: "app-id", 168 | key: "client-key", 169 | secret: "mad-secret", 170 | cluster: "ap4", 171 | }); 172 | 173 | export async function handler(event) { 174 | const { channelName, eventName, data } = JSON.parse(event.body); 175 | pusher.trigger(channelName, eventName, data); 176 | return { statusCode: 200 }; 177 | } 178 | ``` 179 | 180 | ## `useClientTrigger` 181 | 182 | > _I don't want a server though_ 183 | 184 | I hear ya. If you're feeling audacious, you can use [client events](https://pusher.com/docs/channels/using_channels/events#triggering-client-events) to push directly from the client: 185 | 186 | ```typescript 187 | import { useChannel, useClientTrigger } from "@harelpls/use-pusher"; 188 | 189 | const Example = () => { 190 | const channel = useChannel("presence-ca"); 191 | const trigger = useClientTrigger(channel); 192 | const handleClientEvent = () => { 193 | trigger("Pew pew"); 194 | }; 195 | 196 | return ; 197 | }; 198 | ``` 199 | 200 | ## Typescript 201 | 202 | This project was built using typescript, so types are built-in. Yeeeew! 203 | 204 | ## Testing 205 | 206 | I've teamed up with [@nikolalsvk](https://github.com/nikolalsvk) on [`pusher-js-mock`](https://github.com/nikolalsvk/pusher-js-mock) to bring y'all a great pusher mock. 207 | 208 | Testing emitted events with jest can be achieved using `jest.mock` and `@testing-library/react` (or `enzyme`, though your tests should reflect what the user should see **NOT** how the component handles events internally): 209 | 210 | ```typescript 211 | // Example.tsx 212 | import React from "react"; 213 | import { useChannel, useEvent } from "@harelpls/use-pusher"; 214 | 215 | const Example = () => { 216 | const [title, setTitle] = useState(); 217 | const channel = useChannel("my-channel"); 218 | useEvent(channel, "title", ({ data }) => setTitle(data)); 219 | 220 | return {title}; 221 | }; 222 | 223 | // Example.test.tsx 224 | import { render, act } from "@testing-library/react"; 225 | import { PusherMock, PusherChannelMock } from "pusher-js-mock"; 226 | 227 | // mock out the result of the useChannel hook 228 | const mockChannel = new PusherChannelMock(); 229 | jest.mock("@harelpls/use-pusher", () => ({ 230 | ...require.requireActual("@harelpls/use-pusher"), 231 | useChannel: () => mockChannel, 232 | })); 233 | 234 | test("should show a title when it receives a title event", async () => { 235 | // mock the client 236 | const client = new PusherMock("client-key", { cluster: "ap4" }); 237 | 238 | // render component and provider with a mocked context value 239 | const { findByText } = render( 240 | 241 | 242 | 243 | ); 244 | 245 | // emit an event on the mocked channel 246 | act(() => mockChannel.emit("title", { data: "Hello world" })); 247 | 248 | // assert expectations 249 | expect(await findByText("Hello world")).toBeInTheDocument(); 250 | }); 251 | ``` 252 | 253 | [Check out the example tests](https://github.com/mayteio/use-pusher/blob/master/src/__tests__/Example.tsx) for testing presence channels. 254 | 255 | ## React Native 256 | 257 | This package comes with React Native support. Import your `PusherProvider` from `@harelpls/use-pusher/react-native` instead of the default `@harelpls/use-pusher`. All exports are re-exported from there. 258 | 259 | Ensure you add the netinfo package to your project too: [`@react-native-community/netinfo`](https://github.com/react-native-community/react-native-netinfo). 260 | 261 | ```ts 262 | import { PusherProvider, useChannel } from "@harelpls/use-pusher/react-native"; 263 | ``` 264 | 265 | ## Contributing 266 | 267 | 1. Clone the repository and run `yarn && yarn test:watch` 268 | 2. Get coding! 269 | 270 | Please write tests (100% jest coverage) and types. 271 | 272 | ## License 273 | 274 | MIT © [@mayteio](https://github.com/@mayteio) 275 | 276 | --- 277 | 278 | This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook). 279 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | include: 2 | - "_*_.html" 3 | - "_*_.*.html" 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | targets: { 7 | node: "current", 8 | }, 9 | }, 10 | ], 11 | ], 12 | plugins: ["@babel/plugin-proposal-class-properties"], 13 | }; 14 | -------------------------------------------------------------------------------- /docs/assets/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayteio/use-pusher/f9f2389db01d3c102f31b43045325967d96ba342/docs/assets/images/icons.png -------------------------------------------------------------------------------- /docs/assets/images/icons@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayteio/use-pusher/f9f2389db01d3c102f31b43045325967d96ba342/docs/assets/images/icons@2x.png -------------------------------------------------------------------------------- /docs/assets/images/widgets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayteio/use-pusher/f9f2389db01d3c102f31b43045325967d96ba342/docs/assets/images/widgets.png -------------------------------------------------------------------------------- /docs/assets/images/widgets@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayteio/use-pusher/f9f2389db01d3c102f31b43045325967d96ba342/docs/assets/images/widgets@2x.png -------------------------------------------------------------------------------- /docs/globals.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | @harelpls/use-pusher 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 | 27 |
28 |
29 | Options 30 |
31 |
32 | All 33 |
    34 |
  • Public
    • 35 |
  • Public/Protected
    • 36 |
  • All
    • 37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 | Menu 48 |
49 |
50 |
51 |
52 |
53 |
54 | 59 |

@harelpls/use-pusher

60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |

Index

68 |
69 |
70 |
71 |

Modules

72 | 84 |
85 |
86 |
87 |
88 |
89 |
90 | 127 | 131 |
132 |
133 |
134 | 150 |
151 |

Generated using TypeDoc

152 |
153 |
154 | 155 | 156 | -------------------------------------------------------------------------------- /docs/interfaces/_core_usepresencechannel_.usepresencechannelvalue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | usePresenceChannelValue | @harelpls/use-pusher 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 | 27 |
28 |
29 | Options 30 |
31 |
32 | All 33 |
    34 |
  • Public
    • 35 |
  • Public/Protected
    • 36 |
  • All
    • 37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 | Menu 48 |
49 |
50 |
51 |
52 |
53 |
54 | 65 |

Interface usePresenceChannelValue

66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |

Hook return value

76 |
77 |
78 |
79 |
80 |

Hierarchy

81 |
    82 |
  • 83 | {} 84 |
      85 |
    • 86 | usePresenceChannelValue 87 |
      • 88 |
    89 |
    • 90 |
91 |
92 |
93 |

Index

94 |
95 |
96 |
97 |

Properties

98 | 101 |
102 |
103 |
104 |
105 |
106 |

Properties

107 |
108 | 109 |

Optional channel

110 |
channel: PresenceChannel
111 | 116 |
117 |
118 |
119 |
120 | 157 | 197 |
198 |
199 |
200 | 217 |
218 |

Generated using TypeDoc

219 |
220 |
221 | 222 | 223 | -------------------------------------------------------------------------------- /docs/modules/_core_useclienttrigger_.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | "core/useClientTrigger" | @harelpls/use-pusher 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 | 27 |
28 |
29 | Options 30 |
31 |
32 | All 33 |
    34 |
  • Public
    • 35 |
  • Public/Protected
    • 36 |
  • All
    • 37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 | Menu 48 |
49 |
50 |
51 |
52 |
53 |
54 | 62 |

Module "core/useClientTrigger"

63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |

Index

71 |
72 |
73 |
74 |

Functions

75 | 78 |
79 |
80 |
81 |
82 |
83 |

Functions

84 |
85 | 86 |

useClientTrigger

87 |
    88 |
  • useClientTrigger<TData>(channel: Channel | PresenceChannel | undefined): (Anonymous function)
    • 89 |
90 |
    91 |
  • 92 | 97 |
    98 |
    99 |
    example
    100 | 
    const channel = useChannel('my-channel');
101 | const trigger = useClientTrigger(channel)
102 | 
103 | const handleClick = () => trigger('some-client-event', {});
    104 |
    105 |
    106 |
    107 |

    Type parameters

    108 |
      109 |
    • 110 |

      TData

      111 |
      112 |

      shape of the data you're sending with the event.

      113 |
      114 |
      • 115 |
    116 |

    Parameters

    117 |
      118 |
    • 119 |
      channel: Channel | PresenceChannel | undefined
      120 |
      121 |

      the channel you'd like to trigger clientEvents on. Get this from useChannel or usePresenceChannel.

      122 |
      123 |
      • 124 |
    125 |

    Returns (Anonymous function)

    126 |

    A memoized trigger function that will perform client events on the channel.

    127 |
    • 128 |
129 |
130 |
131 |
132 |
133 | 170 | 177 |
178 |
179 |
180 | 196 |
197 |

Generated using TypeDoc

198 |
199 |
200 | 201 | 202 | -------------------------------------------------------------------------------- /docs/modules/_core_usepusher_.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | "core/usePusher" | @harelpls/use-pusher 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 | 27 |
28 |
29 | Options 30 |
31 |
32 | All 33 |
    34 |
  • Public
    • 35 |
  • Public/Protected
    • 36 |
  • All
    • 37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 | Menu 48 |
49 |
50 |
51 |
52 |
53 |
54 | 62 |

Module "core/usePusher"

63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |

Index

71 |
72 |
73 |
74 |

Variables

75 | 78 |
79 |
80 |

Functions

81 | 84 |
85 |
86 |
87 |
88 |
89 |

Variables

90 |
91 | 92 |

Const NOT_IN_CONTEXT_WARNING

93 |
NOT_IN_CONTEXT_WARNING: "No Pusher context. Did you forget to wrap your app in a <PusherProvider />?" = "No Pusher context. Did you forget to wrap your app in a <PusherProvider />?"
94 | 99 |
100 |
101 |
102 |

Functions

103 |
104 | 105 |

usePusher

106 |
    107 |
  • usePusher(): PusherContextValues
    • 108 |
109 |
    110 |
  • 111 | 116 |
    117 |
    118 |

    Provides access to the pusher client instance.

    119 |
    120 |
    121 |
    example
    122 | 
    const { client } = usePusher();
123 | client.current.subscribe('my-channel');
    124 |
    125 |
    126 |
    127 |

    Returns PusherContextValues

    128 |

    a MutableRefObject<Pusher|undefined>. The instance is held by a useRef() hook.

    129 |
    • 130 |
131 |
132 |
133 |
134 |
135 | 172 | 182 |
183 |
184 |
185 | 201 |
202 |

Generated using TypeDoc

203 |
204 |
205 | 206 | 207 | -------------------------------------------------------------------------------- /docs/modules/_native_pusherprovider_.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | "native/PusherProvider" | @harelpls/use-pusher 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 | 27 |
28 |
29 | Options 30 |
31 |
32 | All 33 |
    34 |
  • Public
    • 35 |
  • Public/Protected
    • 36 |
  • All
    • 37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 | Menu 48 |
49 |
50 |
51 |
52 |
53 |
54 | 62 |

Module "native/PusherProvider"

63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |

Index

71 |
72 |
73 |
74 |

Functions

75 | 78 |
79 |
80 |
81 |
82 |
83 |

Functions

84 |
85 | 86 |

Const PusherProvider

87 |
    88 |
  • PusherProvider(props: PropsWithChildren<PusherProviderProps>): Element
    • 89 |
90 |
    91 |
  • 92 | 97 |
    98 |
    99 |

    Wrapper around the core PusherProvider that passes in the Pusher react-native lib

    100 |
    101 |
    102 |

    Parameters

    103 |
      104 |
    • 105 |
      props: PropsWithChildren<PusherProviderProps>
      106 |
      • 107 |
    108 |

    Returns Element

    109 |
    • 110 |
111 |
112 |
113 |
114 |
115 | 152 | 159 |
160 |
161 |
162 | 178 |
179 |

Generated using TypeDoc

180 |
181 |
182 | 183 | 184 | -------------------------------------------------------------------------------- /docs/modules/_web_pusherprovider_.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | "web/PusherProvider" | @harelpls/use-pusher 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 | 27 |
28 |
29 | Options 30 |
31 |
32 | All 33 |
    34 |
  • Public
    • 35 |
  • Public/Protected
    • 36 |
  • All
    • 37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 | Menu 48 |
49 |
50 |
51 |
52 |
53 |
54 | 62 |

Module "web/PusherProvider"

63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |

Index

71 |
72 |
73 |
74 |

Functions

75 | 78 |
79 |
80 |
81 |
82 |
83 |

Functions

84 |
85 | 86 |

Const PusherProvider

87 |
    88 |
  • PusherProvider(props: PropsWithChildren<PusherProviderProps>): Element
    • 89 |
90 |
    91 |
  • 92 | 97 |
    98 |
    99 |

    Wrapper around the core PusherProvider that passes in the Pusher lib

    100 |
    101 |
    102 |

    Parameters

    103 |
      104 |
    • 105 |
      props: PropsWithChildren<PusherProviderProps>
      106 |
      • 107 |
    108 |

    Returns Element

    109 |
    • 110 |
111 |
112 |
113 |
114 |
115 | 152 | 159 |
160 |
161 |
162 | 178 |
179 |

Generated using TypeDoc

180 |
181 |
182 | 183 | 184 | -------------------------------------------------------------------------------- /examples/native-use-pusher-example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /examples/native-use-pusher-example/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /examples/native-use-pusher-example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifacts 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | 61 | # Expo 62 | .expo/* 63 | web-build/ 64 | yarn.lock 65 | use-pusher/ -------------------------------------------------------------------------------- /examples/native-use-pusher-example/App.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from "expo-status-bar"; 2 | import React from "react"; 3 | import { StyleSheet, Text, View } from "react-native"; 4 | import { PusherProvider } from "./use-pusher/native"; 5 | import { PusherExample } from "./PusherExample"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | Open up App.js to start working on your app! 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | backgroundColor: "#fff", 23 | alignItems: "center", 24 | justifyContent: "center", 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /examples/native-use-pusher-example/PusherExample.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button, Text } from "react-native"; 3 | import { usePresenceChannel, useClientTrigger } from "./use-pusher/native"; 4 | 5 | export const PusherExample = () => { 6 | const { channel, ...rest } = usePresenceChannel("presence-my-channel"); 7 | const trigger = useClientTrigger(channel); 8 | 9 | return ( 10 | <> 11 | Hello 12 |