https://github.com/nikhiladiga/react-wsx
A simple react websocket component written in typescript
https://github.com/nikhiladiga/react-wsx
react typescript websocket
Last synced: about 2 months ago
JSON representation
A simple react websocket component written in typescript
- Host: GitHub
- URL: https://github.com/nikhiladiga/react-wsx
- Owner: Nikhiladiga
- Created: 2021-07-01T17:55:18.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-07-01T18:27:59.000Z (almost 5 years ago)
- Last Synced: 2025-01-28T02:13:45.960Z (over 1 year ago)
- Topics: react, typescript, websocket
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-wsx
- Size: 7.81 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-wsx
## A simple react websocket component.
[](https://travis-ci.org/joemccann/dillinger)
react-wsx is a simple react websocket component which makes communicating with a websocket server very easy.
### Installation
```
npm install react-wsx
```
### Props
#### url:*string* - *required*
Websocket server URL.
#### onMessage:*Function* - *required*
Function to handle messages received from socket.
#### onConnect:*Function*
Function to perform additional tasks on socket connection.
#### onDisconnect:*Function*
Function to perform additional tasks on socket disconnect.
#### onError:*Function*
Function to handle socket error
#### debug:*Boolean*
Prop to enable/disable all data,events from socket printing in console. Default value is **true**.
#### reconnect:*Boolean*
Prop to enable/disable reconnect socket feature. Default value is **true**.
#### reconnectInterval:*number*
Prop to specify interval for trying to reconnect socket (in **milliseconds**).
#### reconnectAttempts:*number*
Prop to specify the number of times socket connection should be attempted.
# Usage
```ts
import React, { Component } from 'react'
import ReactWS from 'react-wsx'
export default class App extends Component {
private socketRef = React.createRef();
handleMessage = (message: any) => {
console.log(message);
}
handleConnect = () => {
console.log("connected");
this.socketRef.current.sendMessage("Hello from the other side!");
}
handleDisconnect = () => {
console.log("disconnected");
}
handleError = () => {
console.log("error occurred");
}
render() {
return (
)
}
}
```
## License
MIT