Installations
npm install @harelpls/use-pusherDeveloper Guide
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=8
Score
79.4
Supply Chain
98.8
Quality
75.5
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (89.75%)
JavaScript (10.25%)
Developer
Download Statistics
Total Downloads
1,096,549
Last Day
1,232
Last Week
5,812
Last Month
27,805
Last Year
429,152
GitHub Statistics
143 Stars
197 Commits
33 Forks
3 Watching
44 Branches
7 Contributors
Bundle Size
78.27 kB
Minified
21.42 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
7.2.1
Package Id
@harelpls/use-pusher@7.2.1
Unpacked Size
694.50 kB
Size
138.03 kB
File Count
14
Total Downloads
Cumulative downloads
Total Downloads
1,096,549
Last day
-24.7%
1,232
Compared to previous day
Last week
-21.4%
5,812
Compared to previous week
Last month
10%
27,805
Compared to previous month
Last year
36.5%
429,152
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
39
@harelpls/use-pusher
Easy as React hooks that integrate with the
pusher-jslibrary.
- Install
- Hooks
- Usage
useChannelusePresenceChanneluseEventuseTriggerusePusher- Trigger Server
useClientTrigger- Typescript
- Testing
- React Native
- Contributing
- License
API Reference/Docs
Install
1yarn add @harelpls/use-pusher
Hooks
Usage
You must wrap your app with a PusherProvider and pass it config props for pusher-js initialisation.
1import React from "react"; 2import { PusherProvider } from "@harelpls/use-pusher"; 3 4const config = { 5 // required config props 6 clientKey: "client-key", 7 cluster: "ap4", 8 9 // optional if you'd like to trigger events. BYO endpoint. 10 // see "Trigger Server" below for more info 11 triggerEndpoint: "/pusher/trigger", 12 13 // required for private/presence channels 14 // also sends auth headers to trigger endpoint 15 authEndpoint: "/pusher/auth", 16 auth: { 17 headers: { Authorization: "Bearer token" }, 18 }, 19}; 20 21// Wrap app in provider 22const App = () => { 23 <PusherProvider {...config}> 24 <Example /> 25 </PusherProvider>; 26};
useChannel
Use this hook to subscribe to a channel.
1// returns channel instance. 2const channel = useChannel("channel-name");
usePresenceChannel
Augments a regular channel with member functionality.
1const Example = () => { 2 const { members, myID } = usePresenceChannel('presence-awesome'); 3 4 return ( 5 <ul> 6 {Object.entries(members) 7 // filter self from members 8 .filter(([id]) => id !== myID) 9 // map them to a list 10 .map(([id, info]) => ( 11 <li key={id}>{info.name}</li> 12 )) 13 } 14 </ul> 15 ) 16}
useEvent
Bind to events on a channel with a callback.
1const Example = () => { 2 const [message, setMessages] = useState(); 3 const channel = useChannel("channel-name"); 4 useEvent(channel, "message", ({ data }) => 5 setMessages((messages) => [...messages, data]) 6 ); 7};
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.
useTrigger
A helper function to create a server triggered event. BYO server (See Trigger Server below). Pass in triggerEndpoint prop to <PusherProvider />. Any auth headers from config.auth.headers automatically get passed to the fetch call.
1import { useTrigger } from '@harelpls/use-pusher'; 2 3const Example = () => {. 4 const trigger = useTrigger("channel-name"); 5 const handleClick = () => 6 trigger("event-name", "hello"); 7 8 return ( 9 <button onClick={handleClick}>Say Hello</button> 10 ) 11}
usePusher
Get access to the Pusher instance to do other things.
1import { usePusher } from "@harelpls/use-pusher"; 2 3const Example = () => { 4 const { client } = usePusher(); 5 client.log("Look ma, logs!"); 6 7 return null; 8};
Trigger Server
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.
1import Pusher from "pusher"; 2 3const pusher = new Pusher({ 4 appId: "app-id", 5 key: "client-key", 6 secret: "mad-secret", 7 cluster: "ap4", 8}); 9 10export async function handler(event) { 11 const { channelName, eventName, data } = JSON.parse(event.body); 12 pusher.trigger(channelName, eventName, data); 13 return { statusCode: 200 }; 14}
useClientTrigger
I don't want a server though
I hear ya. If you're feeling audacious, you can use client events to push directly from the client:
1import { useChannel, useClientTrigger } from "@harelpls/use-pusher"; 2 3const Example = () => { 4 const channel = useChannel("presence-ca"); 5 const trigger = useClientTrigger(channel); 6 const handleClientEvent = () => { 7 trigger("Pew pew"); 8 }; 9 10 return <button onClick={handleClientEvent}>Fire</button>; 11};
Typescript
This project was built using typescript, so types are built-in. Yeeeew!
Testing
I've teamed up with @nikolalsvk on pusher-js-mock to bring y'all a great pusher mock.
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):
1// Example.tsx 2import React from "react"; 3import { useChannel, useEvent } from "@harelpls/use-pusher"; 4 5const Example = () => { 6 const [title, setTitle] = useState(); 7 const channel = useChannel("my-channel"); 8 useEvent(channel, "title", ({ data }) => setTitle(data)); 9 10 return <span>{title}</span>; 11}; 12 13// Example.test.tsx 14import { render, act } from "@testing-library/react"; 15import { PusherMock, PusherChannelMock } from "pusher-js-mock"; 16 17// mock out the result of the useChannel hook 18const mockChannel = new PusherChannelMock(); 19jest.mock("@harelpls/use-pusher", () => ({ 20 ...require.requireActual("@harelpls/use-pusher"), 21 useChannel: () => mockChannel, 22})); 23 24test("should show a title when it receives a title event", async () => { 25 // mock the client 26 const client = new PusherMock("client-key", { cluster: "ap4" }); 27 28 // render component and provider with a mocked context value 29 const { findByText } = render( 30 <PusherProvider clientKey="client-key" cluster="ap4" value={{ client }}> 31 <Example /> 32 </PusherProvider> 33 ); 34 35 // emit an event on the mocked channel 36 act(() => mockChannel.emit("title", { data: "Hello world" })); 37 38 // assert expectations 39 expect(await findByText("Hello world")).toBeInTheDocument(); 40});
Check out the example tests for testing presence channels.
React Native
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.
Ensure you add the netinfo package to your project too: @react-native-community/netinfo.
1import { PusherProvider, useChannel } from "@harelpls/use-pusher/react-native";
Contributing
- Clone the repository and run
yarn && yarn test:watch - Get coding!
Please write tests (100% jest coverage) and types.
License
MIT © @mayteio
This hook is created using create-react-hook.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
binaries present in source code
Details
- Warn: binary detected: examples/native-use-pusher-example/android/gradle/wrapper/gradle-wrapper.jar:1
Reason
Found 5/9 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/workflow.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/workflow.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/mayteio/use-pusher/workflow.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/workflow.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/mayteio/use-pusher/workflow.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/workflow.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/mayteio/use-pusher/workflow.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 28 are checked with a SAST tool
Reason
126 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
- Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
- Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-f5x2-xv93-4p23
- Warn: Project is vulnerable to: GHSA-gmpm-xp43-f7g6
- Warn: Project is vulnerable to: GHSA-pf27-929j-9pmm
- Warn: Project is vulnerable to: GHSA-327c-qx3v-h673
- Warn: Project is vulnerable to: GHSA-x4cf-6jr3-3qvp
- Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw
- Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-4r62-v4vq-hr96
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
- Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Score
2.6
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More