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/react-assistivetouch-menu@0.0.2/dist/index.js"></script>
Usage
;;; { 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" ;} { return <AssistiveTouch size="L" behaviour="snapToSides" initialPos= left: 0 top: 200 menuItems= /> ;} const rootElement = document;ReactDOM;
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 runyarn start:demo
which will fire up dev server onhttp://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