0.0.1 • Published 2 years ago

w-react-assistivetouch-menu v0.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

React Assistivetouch Menu

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

npm badge Node.js CI Known Vulnerabilities travis-ci badge downloads badge FOSSA Status hound badge

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

or

npm install react-assistivetouch-menu --save

or

<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 "w-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

proptypedescription
menuItemsarrayArray 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
initialPosobjectSpecify the initial position of menu ball. Position has to be passed as object {left: number, top: number}. Default: {left: 0, top: 0}

Development

this is folk from https://abhishekkhandait.github.io/react-assistivetouch-menu/ for update peer dependencies

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

FOSSA Status