react-buttplug's Introduction

react-buttplug

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

Install

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:

{
    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.

First, provide your App.

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

const App = () => {
  return (
    <ButtplugProvider serverName={"buttplugs."}>
      <VibratorSearchButton />
      <VibratorControls />
    </ButtplugProvider>
  )
}

Then consume the context to create, for example, a connect button:

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>
    )
  }
}

Finally, you can do things with the devices here:

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>
  )
}

TODO

Find a way to indicate a pending device pairing, e.g. after clicking "Pair" and before deviceadded fires.

License

MIT © MausTec

react-buttplug's People

Contributors

Stargazers

Watchers

react-buttplug's Issues

shamelessly remove `.idea` folder

shamelessly recommending to not commit jetbrains IDE config to the branch

Error when compile examples

Hi,

Thank you for your library.
I'm trying to use it in a project but when I compile I have an error:

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:../node_modules/react-scripts

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxxxx/.npm/_logs/2022-02-15T15_11_15_861Z-debug.log
iMac-de-Mohamed:example xxxxxx $ sudo npm install
Password:
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:../node_modules/react-scripts

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxxxx/.npm/_logs/2022-02-15T15_12_47_087Z-debug.log

Any idea of what is the problem ??

Thank you.

Recommend Projects