npmpackage.info

Gathering detailed insights and metrics for @jcm/use-pusher

@jcm/use-pusher - 8.0.0 | npmpackage.info

@jcm/use-pusher

👉 Easy as react/native hooks that integrate with the pusher-js library

8.0.0

143

TypeScript

188.85 kB

2.6

Installations

npm install @jcm/use-pusher

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=8

Pull Requests

Open

43

Total

76

Closed

18

Merged

15

Issues

Open

12

Total

32

Closed

20

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

TypeScript (89.75%)

JavaScript (10.25%)

Developer

mayteio

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

143 Stars

197 Commits

33 Forks

2 Watchers

44 Branches

7 Contributors

Updated on Oct 03, 2024

Maintainers

View All 7 Contributors

Package Meta Information

Latest Version

8.0.0

Package Id

@jcm/use-pusher@8.0.0

Unpacked Size

188.85 kB

Size

47.53 kB

File Count

Published on

Dec 14, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

`@harelpls/use-pusher`

Easy as React hooks that integrate with the pusher-js library.

Install
Hooks
Usage
useChannel
usePresenceChannel
useEvent
useTrigger
usePusher
Trigger Server
useClientTrigger
Typescript
Testing
React Native
Contributing
License

API Reference/Docs

Install

1yarn add @harelpls/use-pusher

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.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

133 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
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-v6h2-p8h4-qcjw
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-vjh7-7g9h-fjfh
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-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
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-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
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-07-07

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

@jcm/use-pusher

Installations

Developer Guide

Yes

CommonJS

>=8

Pull Requests

43

76

18

15

Issues

12

32

20

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@harelpls/use-pusher

API Reference/Docs

Install

Hooks

Usage

useChannel

usePresenceChannel

useEvent

useTrigger

usePusher

Trigger Server

useClientTrigger

Typescript

Testing

React Native

Contributing

License

10

9

5

0

0

0

0

0

0

0

0

0

0

2.6

/10

`@harelpls/use-pusher`

`useChannel`

`usePresenceChannel`

`useEvent`

`useTrigger`

`usePusher`

`useClientTrigger`