{"id":13421893,"url":"https://github.com/innFactory/react-planet","last_synced_at":"2025-03-15T10:31:27.658Z","repository":{"id":55097303,"uuid":"260728683","full_name":"innFactory/react-planet","owner":"innFactory","description":"A react lib for building circular menus in a very easy and handy way.","archived":false,"fork":false,"pushed_at":"2021-08-31T07:16:20.000Z","size":7692,"stargazers_count":184,"open_issues_count":10,"forks_count":22,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-15T08:06:58.979Z","etag":null,"topics":["button","button-menu","circular","circular-menu","menu","planet","planet-menu","radial","radial-menu","react-menu","react-planet","submenu"],"latest_commit_sha":null,"homepage":"https://innfactory.github.io/react-planet","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/innFactory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-02T16:30:57.000Z","updated_at":"2025-03-09T18:27:11.000Z","dependencies_parsed_at":"2022-08-14T11:50:42.281Z","dependency_job_id":null,"html_url":"https://github.com/innFactory/react-planet","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/innFactory%2Freact-planet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/innFactory%2Freact-planet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/innFactory%2Freact-planet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/innFactory%2Freact-planet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/innFactory","download_url":"https://codeload.github.com/innFactory/react-planet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243701426,"owners_count":20333631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["button","button-menu","circular","circular-menu","menu","planet","planet-menu","radial","radial-menu","react-menu","react-planet","submenu"],"created_at":"2024-07-30T23:00:33.545Z","updated_at":"2025-03-15T10:31:27.637Z","avatar_url":"https://github.com/innFactory.png","language":"TypeScript","readme":"# react-planet\n\n[![Version](https://img.shields.io/npm/v/react-planet.svg)](https://www.npmjs.com/package/react-planet)\n[![Downloads](https://img.shields.io/npm/dt/react-planet.svg)](https://www.npmjs.com/package/react-planet)\n\u003cbr /\u003e\n\u003cbr /\u003e\nA react lib for building circular menus in a very easy and handy way.\n\n\u003cimg src=\"doc/react-planet_menu.gif\" width=\"40%\"/\u003e\n\nLive-Demo: [STORYBOOK](https://innfactory.github.io/react-planet)\n\nRead the full story @ [Medium](https://medium.com/@innFactory/creating-circular-menus-with-react-planet-8c7c9df6d766) or [innFactory-Blog](https://innfactory.de/softwareentwicklung/ui-ux/creating-circular-menus-with-react-planet/)\n\n## install\n\n```\nnpm install --save react-planet\n```\n\n## Concept\n\n\u003cimg src=\"doc/concept.png\" width=\"100%\"/\u003e\n\n## Basic Example\n\n\u003cimg src=\"doc/example1.png\" width=\"40%\"\u003e\n\n```jsx\nimport { Planet } from 'react-planet';\n\nexport function MyPlanet() {\n\treturn (\n\t\t\u003cPlanet\n\t\t\tcenterContent={\n\t\t\t\t\u003cdiv\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: 100,\n\t\t\t\t\t\twidth: 100,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tbackgroundColor: '#1da8a4',\n\t\t\t\t\t}}\n\t\t\t\t/\u003e\n\t\t\t}\n\t\t\topen\n\t\t\tautoClose\n\t\t\u003e\n\t\t\t\u003cdiv\n\t\t\t\tstyle={{\n\t\t\t\t\theight: 70,\n\t\t\t\t\twidth: 70,\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\tbackgroundColor: '#9257ad',\n\t\t\t\t}}\n\t\t\t/\u003e\n\t\t\t\u003cdiv\n\t\t\t\tstyle={{\n\t\t\t\t\theight: 70,\n\t\t\t\t\twidth: 70,\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\tbackgroundColor: '#9257ad',\n\t\t\t\t}}\n\t\t\t/\u003e\n\t\t\u003c/Planet\u003e\n\t);\n}\n```\n\n## Change the orbit\n\n\u003cimg src=\"doc/example2.png\" width=\"40%\"\u003e\n\n```jsx\n\u003cPlanet centerContent={div style={...yourStlye}/\u003e}\n        open\n        orbitRadius={120}\n        rotation={30}\n        ...\n\u003e\n```\n\n## Orbit Style\n\n\u003cimg src=\"doc/example3.png\" width=\"40%\"\u003e\n\n```jsx\n\u003cPlanet\n\torbitStyle={(defaultStyle) =\u003e ({\n\t\t...defaultStyle,\n\t\tborderWidth: 4,\n\t\tborderStyle: 'dashed',\n\t\tborderColor: '#6f03fc',\n\t})}\n\tcenterContent={\u003cdiv className={classes.planetSmall} /\u003e}\n\topen\n\u003e\n\t\u003cdiv className={classes.satellite1} /\u003e\n\t\u003cdiv className={classes.satellite2} /\u003e\n\t\u003cdiv className={classes.satellite3} /\u003e\n\u003c/Planet\u003e\n```\n\n## Weird satellites and their orientation\n\n\u003cimg src=\"doc/react-planet_satelliteOrientation.gif\" width=\"60%\"\u003e\n\n```jsx\n\u003cPlanet\n    // set one of the orientations\n    satelliteOrientation=\"INSIDE\"\n\n```\n\n## Bring it to life\n\n\u003cimg src=\"doc/react-planet_bring_it_to_life.gif\" width=\"40%\"\u003e\n\n```jsx\n\u003cPlanet\n    dragablePlanet\n    dragRadiusPlanet={20}\n    bounce\n```\n\n## Planetception\n\nNested planets\n\n\u003cimg src=\"doc/react-planet_planetception.gif\" width=\"60%\"\u003e\n\nCode: [/src/stories/Planetception.stories.tsx](/src/stories/Planetception.stories.tsx)\n\n## Fake the space\n\n\u003cimg src=\"doc/react-planet_space.gif\" width=\"30%\"\u003e\n\n```jsx\n\u003cPlanet\n\tcenterContent={\u003cYourButton0 /\u003e}\n\thideOrbit\n\tautoClose\n\torbitRadius={60}\n\tbounceOnClose\n\trotation={105}\n\t// the bounce direction is minimal visible\n\t// but on close it seems the button wobbling a bit to the bottom\n\tbounceDirection=\"BOTTOM\"\n\u003e\n\t\u003cYourButton1 /\u003e\n\t\u003cYourButton2 /\u003e\n\t\u003cYourButton3 /\u003e\n\t\u003cdiv /\u003e\n\t\u003cdiv /\u003e\n\t\u003cdiv /\u003e\n\t\u003cdiv /\u003e\n\u003c/Planet\u003e\n```\n\n## Alter the physics\n\n\u003cimg src=\"doc/react-planet_physic.gif\" width=\"50%\"\u003e\n\n```jsx\n\u003cPlanet\n      mass={4}\n      tension={500}\n      friction={19}\n\n```\n\n\u003cbr/\u003e\n\n# Props\n\n| name                 | type                                    | example /default         | description                                                    |\n| -------------------- | --------------------------------------- | ------------------------ | -------------------------------------------------------------- |\n| centerContent        | React.Node?                             | \u003cdiv /\u003e                  | The planet component                                           |\n| orbitRadius          | number?                                 | 120                      | How far the satellites are away from the planet                |\n| open                 | boolean?                                | false                    | Set the open/close state from outside                          |\n| autoClose            | boolean?                                | false                    | If true the planet handles the open/close state by itself      |\n| hideOrbit            | boolean?                                | false                    | If true the orbit is hidden / not rendered                     |\n| rotation             | number?                                 | 0                        | The angle for the rotation of all satellites around the planet |\n| satelliteOrientation | DEFAULT INSIDE OUTSIDE READABLE         | undefined / DEFAULT      | The angle for the rotation of one satellite itself             |\n| dragableSatellites   | boolean?                                | false                    | If true you can click and drag a satellite                     |\n| dragRadiusSatellites | number?                                 | 12                       | Defines how much you can drag the satellites                   |\n| dragablePlanet       | boolean?                                | false                    | If true you can click and drag the planet                      |\n| dragRadiusPlanet     | number?                                 | 12                       | Defines how much you can drag the planet                       |\n| bounce               | boolean?                                | false                    | If true the planet bounces on open and close                   |\n| bounceOnOpen         | boolean?                                | false                    | If true the planet bounces only on open                        |\n| bounceOnClose        | boolean?                                | false                    | If true the planet bounces only on close                       |\n| bounceRadius         | number?                                 | 3                        | Defines how much the planet bounces                            |\n| bounceDirection      | TOP BOTTOM LEFT RIGHT                   | undefined                | On hight bounceRadius you can see a direction                  |\n| tension              | number?                                 | 500                      | a react-spring animation physic value                          |\n| friction             | number?                                 | 17                       | a react-spring animation physic value                          |\n| mass                 | number?                                 | 1                        | a react-spring animation physic value                          |\n| orbitStyle           | (default: CSSProperties)=\u003eCSSProperties | () =\u003e ({borderWidth: 4}) | You can override or set a new style for the orbit              |\n| onClick              | (e: MouseEvent)=\u003evoid                   | ()=\u003e{}                   | The function is triggered if you click on the centerComponent  |\n| onClose              | (e: MouseEvent)=\u003evoid                   | ()=\u003e{}                   | The function is triggered if the planet wants to close         |\n\n# Start Storybook local\n\n```\nnpm install\nnpm start\n```\n\n\u003cbr/\u003e\n\n# Made by:\n\n\u003cbr/\u003e\n\u003cimg src=\"doc/innFactory.svg\" width=\"100%\"/\u003e\n\n[https://innFactory.de/](https://innFactory.de/)\n","funding_links":[],"categories":["UI Components","Components"],"sub_categories":["Menu"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FinnFactory%2Freact-planet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FinnFactory%2Freact-planet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FinnFactory%2Freact-planet/lists"}