A voice sensor for react-beautiful-dnd, built with the Web Speech API

🎮 Play with it here 🎮

What are sensors?

A sensor is a React Hook (or plain ol' function) that gives you access to RBD's Programmatic API, with that you're able to programmatically control drag and drop interactions with any input type you can think of.

Why Voice?

Imagine dragging and dropping Jira tickets in a standup using only your voice. Or improving accessiblity for people with a physical disability.

Get started 🏗

Installation

npm install --save rbd-voice-sensor or yarn add rbd-voice-sensor

Basic Example

import React from 'react';
import { DragDropContext } from 'react-beautiful-dnd';
import voiceSensor from 'rbd-voice-sensor';

function App() {
    return <DragDropContext sensors={[voiceSensor]}>{/*...*/}</DragDropContext>;
}

Resources 📖

• react-beautiful-dnd
• RBD Programmatic API
• Web Speech API