React-assistivetouch-menu NPM

React Assistivetouch Menu

React assistivetouch menu is a react component inspired from iOS assitivetouch.

Assistive touch Menu

Installation

The easiest way to use react-select is to install it from npm and build it into your app with Webpack.

yarn add react-assistivetouch-menu

npm install react-assistivetouch-menu --save

<script src="https://unpkg.com/react-assistivetouch-menu@0.0.2/dist/index.js"></script>

Usage

import React from "react";
import ReactDOM from "react-dom";
import { AssistiveTouch } from "react-assistivetouch-menu";

function getMenuItems() {
  return [{
      icon: <div className="menuitem">★</div>,
      label: "Custom"
    },{
      icon: <div className="menuitem">🖐</div>,
      label: "Gestures"
    },{
      icon: <div className="menuitem">⊕</div>,
      label: "Add"
    },{
      icon: <div className="menuitem">😴</div>,
      label: "Snooze"
    },{
      icon: <div className="menuitem">🍟</div>,
      label: "Fries"
    },{
      icon: <div className="menuitem">🙋</div>,
      label: "Hey"
    }];
}

function App() {
  return (
    <AssistiveTouch size="L" behaviour="snapToSides" initialPos={{ left: 0, top: 200 }} menuItems={getMenuItems()}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Props

prop	type	description
`menuItems`	`array`	Array of `items` to be added to menu. `item` is object having 2 properties. 'icon' which has to be a JSX Element and `label` for the icon. Ex. `menuItems=[{icon: <ABC></ABC>, label: 'ABC'}]`
`behaviour`	`'snapToSides' \| 'freeflow'`	specify the behaviour of assistive touch menu ball. Default: `snapToSides`
`size`	`'XS' \| 'S' \| 'M' \| 'L' \| 'XL'`	Specify the size of menu. Default: `M`
`initialPos`	`object`	Specify the initial position of menu ball. Position has to be passed as object `{left: number, top: number}`. Default: `{left: 0, top: 0}`

Development

Build

yarn
yarn build
Debug
To debug you can run demo app and test your changes over it. Just run yarn start:demo which will fire up dev server on http://localhost:9000 for testing and debugging the component.