Skip to content

Commit

Permalink
[add] v1.0.0
Browse files Browse the repository at this point in the history
Sergio Daniel Xalambrí committed Mar 18, 2016
0 parents commit bf5cecd
Showing 8 changed files with 163 additions and 0 deletions.
10 changes: 10 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"plugins": [
"transform-es2015-modules-commonjs",
"transform-class-properties",
"transform-es2015-spread",
"transform-es2015-classes",
"transform-react-constant-elements",
"transform-react-inline-elements"
]
}
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules
build
log
*.log
4 changes: 4 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules
test
lib
.babelrc
51 changes: 51 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# 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(
<SocketProvider socket={socket}>
<App />
</SocketProvider>,
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 (
<button onClick={sendMessage}>
Send!
</button>
);
}

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))
31 changes: 31 additions & 0 deletions lib/SocketProvider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, { Component, PropTypes} from 'react';

class SocketProvider extends Component {
static propTypes = {
socket: PropTypes.oneOfType([
PropTypes.bool, PropTypes.object
]),
};

static defaultProps = {
socket: false,
};

static childContextTypes = {
socket: PropTypes.oneOfType([
PropTypes.bool, PropTypes.object
]),
};

getChildContext() {
return {
socket: this.props.socket,
};
}

render() {
return this.props.children;
}
}

export default SocketProvider;
7 changes: 7 additions & 0 deletions lib/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import SocketProvider from './SocketProvider.js';
import socketConnect from './socket-connect.js';

export default {
SocketProvider,
socketConnect,
};
19 changes: 19 additions & 0 deletions lib/socket-connect.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React, { createFactory, PropTypes } from 'react';

function socketConnect(Target) {
function SocketConnect(props, context) {
props.socket = context.socket;

return createFactory(Target)(props);
}

SocketConnect.contextTypes = {
socket: PropTypes.oneOfType([
PropTypes.bool, PropTypes.object
]),
}

return SocketConnect;
}

export default socketConnect;
37 changes: 37 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"name": "socket.io-react",
"version": "1.0.0",
"description": "A High-Order Component to connect React and Socket.io",
"main": "build/index.js",
"scripts": {
"build": "babel lib --out-dir build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/sergiodxa/socket.io-react.git"
},
"keywords": [
"react",
"socket.io",
"websocket"
],
"author": "Sergio Daniel Xalambrí <sergio@xalambri.com.ar> (http://sergio.xalambri.com.ar/)",
"license": "MIT",
"bugs": {
"url": "https://github.com/sergiodxa/socket.io-react/issues"
},
"homepage": "https://github.com/sergiodxa/socket.io-react#readme",
"devDependencies": {
"babel": "6.5.2",
"babel-cli": "6.6.5",
"babel-plugin-transform-class-properties": "6.6.0",
"babel-plugin-transform-es2015-classes": "6.6.5",
"babel-plugin-transform-es2015-modules-commonjs": "6.7.0",
"babel-plugin-transform-es2015-spread": "6.6.5",
"babel-plugin-transform-react-constant-elements": "6.5.0",
"babel-plugin-transform-react-inline-elements": "6.6.5"
},
"peerDependencies": {
"socket.io-client": "^1.4.5"
}
}

0 comments on commit bf5cecd

Please sign in to comment.