Nascent Plasticine Materialist
    Wondering what’s next for npm?Check out our public roadmap! »

    react-assistivetouch-menu
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    React Assistivetouch Menu

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

    npm badge Greenkeeper badge travis-ci badge downloads 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 "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

    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

    Install

    npm i react-assistivetouch-menu

    DownloadsWeekly Downloads

    8

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    24 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar