https://github.com/kingdutch/react-disc-menu

A circular menu component inspired by Second Life built with React and Styled Components.
https://github.com/kingdutch/react-disc-menu

react react-component reactjs styled-component

Last synced: 28 days ago
JSON representation

A circular menu component inspired by Second Life built with React and Styled Components.

• Host: GitHub
• URL: https://github.com/kingdutch/react-disc-menu
• Owner: Kingdutch
• License: mit
• Created: 2019-04-26T12:07:39.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-26T15:08:15.000Z (almost 6 years ago)
• Last Synced: 2024-03-25T06:21:27.730Z (10 months ago)
• Topics: react, react-component, reactjs, styled-component
• Language: JavaScript
• Size: 42 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Disc Menu

React Disc Menu is a circular menu component inspired by Second Life built with 

[React](https://reactjs.org/) and [Styled Components](https://www.styled-components.com/).

## Installation

Install using npm or yarn.

```bash

npm install --save react-disc-menu

```

```bash

yarn add react-disc-menu

```

## Usage

A single CircularMenu element is exported by the module. This will render each 

child on its own wedge. The wedges are organised in a circle with space evenly

divided among all children.

```jsx

import React from "react";

import ReactDOM from "react-dom";

import CircularMenu from "react-disc-menu";

function App() {

  return (

    

        alert("I'm a button")}>

         Option 1

       

        alert("Links work too")}>

         Option 2

       

     

 );

}

// Render our app in a 
 element.

ReactDOM.render(element, document.getElementById('root'));

```


### Properties

`cutout?: float` Default: `null`

A number between 0 and 1 that determines the size of the cutout in the middle of the menu.

`itemOrientation?: ["toBottom", "toCenter"]`

Default: `toBottom`

Determines the orientation of the text or icon that is in a wedge. `toBottom` 

will ensure that the bottom of each item points to the bottom of the page. 

`toCenter` will align the bottom of each item pointing to the center of the 

menu.

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://github.com/Kingdutch/react-disc-menu/blob/master/LICENSE)