Installations
npm install @pierrad/pubnub-react-chat-componentsDeveloper Guide
Typescript
Yes
Module System
CommonJS
Node Version
12.13.0
NPM Version
6.12.0
Score
62.3
Supply Chain
91
Quality
71.4
Maintenance
25
Vulnerability
97.9
License
Releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (83.19%)
SCSS (12.59%)
JavaScript (3.83%)
CSS (0.25%)
HTML (0.09%)
Shell (0.05%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
pubnub
Download Statistics
Total Downloads
2,723
Last Day
2
Last Week
9
Last Month
47
Last Year
277
GitHub Statistics
181 Stars
450 Commits
61 Forks
14 Watching
22 Branches
76 Contributors
Bundle Size
110.55 kB
Minified
26.80 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
0.2.11
Package Id
@pierrad/pubnub-react-chat-components@0.2.11
Unpacked Size
1.92 MB
Size
372.01 kB
File Count
31
NPM Version
6.12.0
Node Version
12.13.0
Publised On
13 Apr 2023
Total Downloads
Cumulative downloads
Total Downloads
2,723
Last day
-50%
2
Compared to previous day
Last week
-67.9%
9
Compared to previous week
Last month
4,600%
47
Compared to previous month
Last year
-74.7%
277
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
4
Dev Dependencies
36
React Chat Components (Beta)
PubNub's Chat Components library provides easy-to-use components to build chat applications using PubNub Chat on the React Framework. Our component library is the fastest way to add chat features like direct and group messaging, typing indicators, reactions and more without going through the complexity of low-level architecture of realtime networks. At the same time it allows you to create apps for various use cases, with different functionalities and customizable looks.
Quick Links
- Sample Apps - sample applications built using Chat Components for React
- React Component Docs - describes the components' features, options, customizations etc.
- PubNub Chat Docs - look into this first to have a general understanding of how PubNub works
- PubNub React SDK - React wrapper can be used for other types of applications as well
Features
- User and Channel Metadata: fetching metadata about users, channels and memberships from PB Objects storage using custom hooks
- Subscriptions: automatic subscriptions to current channel, optional subscriptions to other channels and channel groups
- Messages: publishing and listening to text messages, fetching history for each channel
- Presence: fetching currently present users and listening to new presence, publishing presence events
- Typing Indicators: typing indicators displayed as text notifications or messages
- Message Reactions: publishing and displaying message reactions (emojis) for each message
Benefits
- Ease of installation and setup
- Allows to build fully-featured chat applications
- No need to deal with server code
- Useful compontent options to tweak the functionalities
- Built-in light and dark themes for various use cases: group, support and event chats
- Extra customization with CSS variables
- TypeScript support
Requirements
List of Components
- Chat (obligatory state provider)
- Message List
- Message Input
- Channel List
- Channel Members
- Typing Indicator
Usage
PubNub Account
-
Sign in or create an account to create an app on the Admin Portal and get the keys to use in your application.
-
When you create a new app, the first set of keys is generated automatically, but a single app can have as many keysets as you like. We recommend that you create separate keysets for production and test environments.
-
Some of the functionalities you might want to enable on your keyset depending on the use-case include Presence, Storage & Playback (including correct Renention) and Objects (be sure to select a geographical region corresponding to most users of your application).
Run Sample Apps
Start with exploring our Sample Apps that are built using chat components. Follow the steps below to run the apps locally in your own environment.
- Clone the repository:
1git clone git@github.com:pubnub/react-chat-components.git
- Go to the
samplesfolder and install the dependencies:
1cd react-chat-components/samples 2npm install
- Follow steps from the
PubNub Account section
to create your own keys and paste them into
pubnub-keys.json:
1vi pubnub-keys.json
- Run the application:
1npm start
Components Installation
Install the components and all required dependencies using npm:
1npm install --save pubnub pubnub-react @pubnub/react-chat-components
Components Usage
- Import PubNub, PubNub React Provider and the components:
1import PubNub from "pubnub"; 2import { PubNubProvider } from "pubnub-react"; 3import { 4 Chat, 5 MessageList, 6 MessageInput, 7 ChannelList, 8 MemberList, 9} from "@pubnub/react-chat-components";
- Create your PubNub client and rest of the configuration for the Chat, which serves as a common context for all of the components:
1const pubnub = new PubNub({ 2 publishKey: "myPublishKey", 3 subscribeKey: "mySubscribeKey", 4 uuid: "myUniqueUUID", 5}); 6const currentChannel = "myCurrentChannel"; 7const theme = "light";
- Feed the PubNub Provider with your newly created client as with other PubNub React applications:
1const MyComponent = () => { 2 return <PubNubProvider client={pubnub}></PubNubProvider>; 3};
- Place the components within the Chat state provider in any order that your app requires. Components can be tweaked later on using option properties and CSS variables:
1const MyComponent = () => { 2 return ( 3 <PubNubProvider client={pubnub}> 4 <Chat {...{ currentChannel, theme }}> 5 <MessageList /> 6 <MessageInput /> 7 </Chat> 8 </PubNubProvider> 9 ); 10};
- Check out the
PubNub Chat Components Documentation to
learn more about how to use the components and the
PubNub Chat Components Samples to see
what is possible using the components. Source code of the sample applications can be found in the
samplesfolder in the repository root.
No vulnerabilities found.
Reason
all changesets reviewed
Reason
no binaries found in the repo
Reason
4 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 3
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dangerous workflow patterns detected
Details
- Warn: script injection with untrusted input ' startsWith(github.event.comment.body, format('@{0} ', env.CLEN_BOT)) ': .github/workflows/commands-handler.yml:21
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
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/commands-handler.yml:1
- Warn: no topLevel permission defined: .github/workflows/on-pull-request-create.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/run-tests.yml:1
- Warn: no topLevel permission defined: .github/workflows/run-validations.yml:1
- Info: no jobLevel write permissions found
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
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
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Info: Possibly incomplete results: error parsing shell code: invalid parameter name: .github/workflows/commands-handler.yml:21
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commands-handler.yml:27
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commands-handler.yml:32
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-pull-request-create.yml:15
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-pull-request-create.yml:17
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:18
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:36
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:41
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-tests.yml:42
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-tests.yml:55
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-tests.yml:67
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-tests.yml:74
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-tests.yml:94
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-tests.yml:23
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-tests.yml:28
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-validations.yml:13
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-validations.yml:15
- Warn: npmCommand not pinned by hash: .github/workflows/run-tests.yml:64
- Info: 0 out of 16 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 2 npmCommand dependencies pinned
Reason
23 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-hpx4-r86g-5jrg
- Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-5844-q3fc-56rh
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-cchq-frgv-rjh5
- Warn: Project is vulnerable to: GHSA-g644-9gfx-q4q4
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Score
2.2
/10
Last Scanned on 2024-05-20
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