React provider for Buttplug.io's
buttplug-ffi-jslibrary. Here there be WASM.
npm install --save @maustec/react-buttplugSince 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:
{
test: /\.wasm$/,
type: 'webassembly/experimental'
}Check out example/ for a create-react-app setup that initializes Buttplug.
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.
import { ButtplugProvider } from '@maustec/react-buttplug'
import {
VibratorSearchButton,
VibratorControls
} from 'the-next-examples'
const App = () => {
return (
<ButtplugProvider serverName={"buttplugs."}>
<VibratorSearchButton />
<VibratorControls />
</ButtplugProvider>
)
}import React, { 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 (
<a onClick={handleClick} href='#'>Start Searching</a>
)
} else {
return (
<p>Waiting for Buttplugs...</p>
)
}
}import React, { 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 (
<div>
<input type='number'
min='0'
max='1'
value={ vibrateSpeed }
onChange={ handleVibrateChange }
/>
<ul>
{ devices.map((device) => (
<ButtplugDeviceController key={device.Index} device={device} vibrate={vibrateSpeed}>
<li>{ device.Name }</li>
</ButtplugDeviceController>
)) }
</ul>
</div>
)
}- Find a way to indicate a pending device pairing, e.g. after clicking "Pair" and before
deviceaddedfires.
MIT © MausTec