0.0.1 • Published 2 years ago
w-react-assistivetouch-menu v0.0.1
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
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
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
this is folk from https://abhishekkhandait.github.io/react-assistivetouch-menu/ for update peer dependencies
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