JSPM – react-assistivetouch-menu@0.0.3

Package Exports

react-assistivetouch-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-assistivetouch-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Assistivetouch Menu

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

Assistive touch Menu

JS Example | TypeScript Example

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'`
`size`	`'XS'	'S'
`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.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

react-assistivetouch-menu