abhishekkhandait/react-assistivetouch-menu

iOS inspired assistive touch menu built with React

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

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

or

npm install react-assistivetouch-menu --save

or

<script src="https://unpkg.com/[email protected]/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

1. yarn
2. 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.

License

MIT License Copyright (c) 2019 Abhishek Khandait

react-assistivetouch-menu's Issues

SnapToSide misbehaves on screen resize

If screen/viewport is resized the snapping points still remain the same and therefore menu ball moves out or inside viewport.

An in-range update of @types/react is breaking the build 🚨

The devDependency @types/react was updated from 16.8.19 to 16.8.20.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ✅ continuous-integration/travis-ci/push: The Travis CI build passed (Details).
• ❌ continuous-integration/travis-ci/pr: The Travis CI build could not complete due to an error (Details).
• ❌ Travis CI - Pull Request: The build errored. This is a change from the previous build, which passed.
• ✅ Travis CI - Branch: The build passed.

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.