react-buttplug

> React provider for Buttplug.io's buttplug-ffi-js library. Here there be WASM.

 

Install

``bash
npm install --save @maustec/react-buttplug
`

Since buttplug requires a WASM blob, you'll need to tell webpack that WASM files are webassembly/experimental typed..
If you're using create-react-app, check out CRACO:

https://github.com/gsoft-inc/craco

Your new rule should look something like this:

`js
{
test: /\.wasm$/,
type: 'webassembly/experimental'
}
`

Check out example/ for a create-react-app setup that initializes Buttplug.

Usage

Wrap your app in this and you'll be able to consume ButtplugContext wherever
you need control of buttplugs. Any methods of interest are available on the
context.

$3


`jsx
import { ButtplugProvider } from '@maustec/react-buttplug'
import {
VibratorSearchButton,
VibratorControls
} from 'the-next-examples'

const App = () => {
return (




)
}
`

$3

`jsx
import { useContext } from 'react'
import { ButtplugDeviceContext } from '@maustec/react-buttplug'

const VibratorSearchButton = () => {
const { buttplugReady, startSearching } = useContext(ButtplugDeviceContext);

const handleClick = (e) => {
e.preventDefault();
startSearching()
.then(console.log)
.catch(console.error)
}

if (buttplugReady) {
return (
Start Searching
)
} else {
return (


Waiting for Buttplugs...


)
}
}
`

##E Finally, you can do things with the devices here:

`jsx
import { useContext, useState } from 'react'
import {
ButtplugDeviceContext,
ButtplugDeviceController
} from '@maustec/react-buttplug'

const VibratorControls = () => {
const { devices } = useContext(ButtplugDeviceContext)
const [ vibrateSpeed, setVibrateSpeed ] = useState(0.0);

const handleVibrateChange = (e) => {
setVibrateSpeed(parseFloat(e.target.value))
}

return (


{ devices.map((device) => (


• { device.Name }


)) }


)
}
``

License

MIT © MausTec