2017-07-26 11:31:51 +08:00
< div align = "center" markdown = "1" >
2017-07-27 07:34:42 +08:00
< img src = "docs/logo.jpg" alt = "React Bluetooth - Logo" width = "200" >
2017-07-26 11:39:01 +08:00
< br / >
2017-07-27 08:17:46 +08:00
< img src = "https://raw.githubusercontent.com/jvallelunga/redux-bluetooth/HEAD/docs/name.jpg" alt = "React Bluetooth - Name" width = "500" >
2017-07-26 11:31:51 +08:00
**Redux middleware to dispatch actions via bluetooth to a peripheral store**
2017-07-11 10:01:36 +08:00
2017-07-11 20:55:25 +08:00
[![Build Status ](https://travis-ci.org/jvallelunga/redux-bluetooth.svg?branch=master )](https://travis-ci.org/jvallelunga/redux-bluetooth)
2017-07-13 10:49:47 +08:00
[![codecov ](https://codecov.io/gh/jvallelunga/redux-bluetooth/branch/master/graph/badge.svg )](https://codecov.io/gh/jvallelunga/redux-bluetooth)
2017-07-27 08:17:46 +08:00
![gzip size ](http://img.badgesize.io/https://raw.githubusercontent.com/jvallelunga/redux-bluetooth/master/dist/redux-bluetooth.webapp.js?compression=gzip&label=gzip%20size )
2017-07-11 20:55:25 +08:00
2017-07-26 11:31:51 +08:00
< / div >
2017-07-26 12:17:41 +08:00
Redux Bluetooth is a project which consists in two components: **webapp** middleware, is a redux middleware to dispatch actions via [web bluetooth ](https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web#user_gesture_required ). **peripheral** store, is a redux store which process actions received over bluetooth and notify changes on every store change.
2017-07-26 11:31:51 +08:00
2017-08-12 22:54:08 +08:00
< div align = "center" markdown = "1" >
< img src = "docs/example.gif" alt = "React Bluetooth - Example" width = "600" >
< / div >
2017-07-26 12:17:41 +08:00
## Install
2017-07-26 11:31:51 +08:00
2017-07-11 10:01:36 +08:00
```shell
$ npm install redux-bluetooth
```
2017-07-26 12:17:41 +08:00
## Usage
### Webapp
```javascript
import { createSyncStore } from 'redux-bluetooth/build/webapp';
// ACTIONS, list of actions types to dispatch over bluetooth
const store = createSyncStore(ACTIONS);
```
```javascript
import { connect } from 'react-redux';
import { actions } from 'redux-bluetooth/build/webapp';
import Component from './component';
const mapState = state => state;
const mapAction = {
onConnect: actions.connectStore,
};
export { Component };
export default connect(mapState, mapAction)(Component);
```
**Warning:** actions.connectStore must be trigger by an user action. [more info ](https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web#user_gesture_required )
### Peripheral
2017-07-11 10:01:36 +08:00
```javascript
2017-07-26 12:17:41 +08:00
import { connectSyncStore } from 'redux-bluetooth/build/peripheral';
// NAME, name of the peripehral
// STORE, redux store
connectSyncStore(NAME, STORE);
```
## Example
### Set up
First, clone this repo and install example dependencies
2017-07-11 10:01:36 +08:00
2017-07-26 12:17:41 +08:00
```shell
$ git clone git@github.com:jvallelunga/redux-bluetooth.git
$ cd redux-bluetooth
$ npm run example:install
2017-07-11 10:01:36 +08:00
```
2017-07-26 12:17:41 +08:00
### Start Peripheral
Make sure you have your bluetooth enabled
2017-07-14 08:48:51 +08:00
```shell
2017-07-26 12:17:41 +08:00
$ npm run example:start
2017-07-14 08:48:51 +08:00
```
2017-07-26 12:17:41 +08:00
### Open Webapp
Before starting the webapp, go to `chrome://flags/#enable-experimental-web-platform-features` , enable the highlighted flag, and restart Chrome on your mobile.
Then, Make sure you have your bluetooth enabled.
Finally, open this url https://jvallelunga.github.io/redux-bluetooth/ on your mobile.