https://github.com/abhishekkhandait/react-assistivetouch-menu
iOS inspired assistive touch menu built with React
https://github.com/abhishekkhandait/react-assistivetouch-menu
assistive assistivetouch ios menu-navigation react react-component reactjs reactjs-typescript typescript webpack
Last synced: 2 months ago
JSON representation
iOS inspired assistive touch menu built with React
- Host: GitHub
- URL: https://github.com/abhishekkhandait/react-assistivetouch-menu
- Owner: abhishekkhandait
- License: mit
- Created: 2019-06-07T21:07:38.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-10T09:59:51.000Z (almost 4 years ago)
- Last Synced: 2025-03-15T12:15:51.381Z (2 months ago)
- Topics: assistive, assistivetouch, ios, menu-navigation, react, react-component, reactjs, reactjs-typescript, typescript, webpack
- Language: TypeScript
- Homepage: https://abhishekkhandait.github.io/react-assistivetouch-menu/
- Size: 861 KB
- Stars: 11
- Watchers: 0
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React assistivetouch menu is a react component inspired from iOS assitivetouch.
[](https://www.npmjs.com/package/react-assistivetouch-menu)  [](https://snyk.io/test/github/abhishekkhandait/react-assistivetouch-menu?targetFile=package.json) [](https://travis-ci.org/abhishekkhandait/react-assistivetouch-menu) []([https://www.npmjs.com/package/react-assistivetouch-menu) [](https://app.fossa.io/projects/git%2Bgithub.com%2Fabhishekkhandait%2Freact-assistivetouch-menu?ref=badge_shield) [](https://houndci.com)
[JS Example](https://codesandbox.io/s/epic-merkle-964y1) | [TypeScript Example](https://codesandbox.io/s/modest-surf-glql8)
## Installation
The easiest way to use react-select is to install it from npm and build it into your app with Webpack.
```bash
yarn add react-assistivetouch-menu
```
or
```bash
npm install react-assistivetouch-menu --save
```
or
```bash
```
## Usage
```javascript
import React from "react";
import ReactDOM from "react-dom";
import { AssistiveTouch } from "react-assistivetouch-menu";
function getMenuItems() {
return [{
icon:
★,
label: "Custom"
},{
icon: 🖐,
label: "Gestures"
},{
icon: ⊕,
label: "Add"
},{
icon: 😴,
label: "Snooze"
},{
icon: 🍟,
label: "Fries"
},{
icon: 🙋,
label: "Hey"
}];
}
function App() {
return (
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, 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: , 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
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
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fabhishekkhandait%2Freact-assistivetouch-menu?ref=badge_large)