https://github.com/platzidev/socket.io-react

A High-Order component to connect React and Socket.io easily
https://github.com/platzidev/socket.io-react

decorators high-order-component react react-components socket socket-io

Last synced: about 1 month ago
JSON representation

A High-Order component to connect React and Socket.io easily

• Host: GitHub
• URL: https://github.com/platzidev/socket.io-react
• Owner: PlatziDev
• Created: 2016-03-18T21:13:38.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-04-09T21:37:21.000Z (10 months ago)
• Last Synced: 2024-12-11T13:42:13.674Z (about 1 month ago)
• Topics: decorators, high-order-component, react, react-components, socket, socket-io
• Language: JavaScript
• Homepage:
• Size: 87.9 KB
• Stars: 66
• Watchers: 2
• Forks: 5
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# socket.io-react

A High-Order component to connect React and Socket.io easily.

## API

```javascript

import {

  SocketProvider,

  socketConnect,

} from 'socket.io-react';

```

### SocketProvider(socket?)

```javascript

import { SocketProvider } from 'socket.io-react';

import io from 'socket.io-client';

import App from './containers/App';

const socket = io.connect(process.env.SOCKET_URL);

socket.on('message', msg => console.log(msg));

const DOMNode = document.getElementById('renderTarget');

render(

  

    

  ,

  DOMNode

);

```

* `socket` property is `false` by default.

### socketConnect(Target)

```javascript

import { socketConnect } from 'socket.io-react';

function App(props) {

  function sendMessage() {

    props.socket.emit('message', 'Hello world!');

  }

  return (

    

      Send!

    

  );

}

export default socketConnect(App);

```

* `socketConnect` can be used as a decorator (using [**babel-plugin-transform-decorators-legacy**](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy))