# react-native-svgwheel-menu

> React Native Svg Wheel

Latest version **3.1.0** (published 2019-01-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-svgwheel-menu
pnpm add react-native-svgwheel-menu
yarn add react-native-svgwheel-menu
bun add react-native-svgwheel-menu
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2019-01-22 |
| First published | 2018-11-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 60.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ayanworks Technologies |
| Maintainers | rantoinne |
| Keywords | React, Native, Svg, Wheel, Menu |

## Links

- npm: https://www.npmjs.com/package/react-native-svgwheel-menu
- Repository: https://github.com/ayanworkstech/react-native-svg-wheel-menu
- Homepage: https://github.com/ayanworkstech/react-native-svg-wheel-menu#readme
- Issues: https://github.com/ayanworkstech/react-native-svg-wheel-menu/issues
- npm.io page: https://npm.io/package/react-native-svgwheel-menu

## Dependencies (4)

- [d3](https://npm.io/package/d3.md) ^5.7.0
- [d3-shape](https://npm.io/package/d3-shape.md) ^1.2.2
- [native-base](https://npm.io/package/native-base.md) ^2.8.1
- [react-native-svg](https://npm.io/package/react-native-svg.md) ^8.0.8

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.1.0 (latest) — 2019-01-22
- 3.0.1 — 2019-01-22
- 3.0.0 — 2019-01-15
- 2.0.1 — 2019-01-15
- 2.0.0 — 2019-01-15
- 1.2.4 — 2018-12-18
- 1.2.0 — 2018-12-11
- 1.1.8 — 2018-12-11
- 1.1.5 — 2018-12-11
- 1.1.4 — 2018-11-20
- 1.1.3 — 2018-11-20
- 1.1.2 — 2018-11-20
- 1.1.1 — 2018-11-20
- 1.1.0 — 2018-11-20

## README

# React-Native SVGWheel Menu

This is a react-native component for IOS and Android that uses React Native SVG where you send the configuration as a prop and the Menu is rendered.

## Getting Started
```bat
 $ npm install react-native-svgwheel-menu --save
```
## Demo
![alt text](https://i.postimg.cc/MGZ1z844/s1.png)
![alt text](https://i.postimg.cc/RhHQs7rZ/Screenshot-1548160725.png)
![alt text](https://i.postimg.cc/HWc2kgJ1/Screenshot-1548160720.png)
![alt text](https://i.postimg.cc/0ydb59zv/Screenshot-1542871939.png)

```javascript
import GeneratePathCanvas from "react-native-svgwheel-menu";

const userPurchases = [
    {
        id: '1.1',
        parent: '0.0',
        itemName: 'US',
        price: 1,
        color: '',
        icon: 'https://networkImage.url'
    },
    {
        id: '1.2',
        parent: '0.0',
        itemName: 'ITALY',
        price: 1,
        color: '',
        icon: 'https://networkImage.url'
    },
    {
        id: '1.3',
        parent: '0.0',
        itemName: 'BELGIUM',
        price: 1,
        color: '',
        icon: 'https://networkImage.url'
    },
    {
        id: '1.4',
        parent: '0.0',
        itemName: 'POLAND',
        price: 1,
        color: '',
        icon: 'https://networkImage.url'
    },
    {
        id: '1.5',
        parent: '0.0',
        itemName: 'POLAND',
        price: 1,
        color: '',
        icon: 'https://networkImage.url'
    },
    {
        id: '1.6',
        parent: '0.0',
        itemName: 'URUGUAY',
        price: 1,
        color: '',
        icon: 'https://networkImage.url'
    },
    {
        id: '2.1',
        parent: '1.1',
        itemName: 'TEXAS',
        price: 1,
        color: '',
        icon: 'https://networkImage.url'
    },
    {
        id: '2.2',
        parent: '1.1',
        itemName: 'INDIANA',
        price: 1,
        color: '',
        icon: 'https://networkImage.url'
    },
    {
        id: '2.3',
        parent: '1.1',
        itemName: 'NEVADA',
        price: 1,
        color: '',
        icon: 'https://networkImage.url'
    },
    ...
];
class App extends Component {
    render() {
    return (
            <GeneratePathCanvas
                semiCircle={false}
                textColor= '#000000'
                depth={2}
                homeTitle='Home'
                userPurchases={userPurchases}
                holdHoverLayer= {2000}
                pieColorArray={pieColorArray}
                clickEvent={this.generatePathClickEvent} />
        );
    }
}
```

## Props
| Prop          | Required      | Description  |
| ------------- |:-------------:| ------------:|
| depth        | true          | A Number to define Levels of your Menu  |
| homeTitle     | true      |   A String to define the title at Level 1 |
| userPurchases     | true      |   An array of values to differentiate between parent and child levels |
| pieColorArray   | true | An array of colors in hex code |
| clickEvent | true      |   A function callback that handles child data and its name clicked at last level |
| semiCircle| true  | A boolean to define the menu to be Semicircle for True and Circle for False |
| holdHoverLayer| true  | A Number to pass as time in ms to hold hover layer |

## Stuff used to make this:

 * [react-native-svg](https://github.com/react-native-community/react-native-svg) for making the svg

---
_Source: https://npm.io/package/react-native-svgwheel-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._