A React library for creating customizable circular menus with smooth animations and drag-and-drop interactions.
react-planet is a React library for building circular menus, also known as radial or orbit menus. It provides a customizable Planet component to arrange satellite items around a central element with smooth animations and interactive features like drag-and-drop. It solves the problem of creating engaging circular navigation or action menus without complex manual animation implementations.
Frontend developers and UI engineers building React applications that require circular menus, radial navigation, or interactive circular interfaces, such as design tools, dashboards, or creative apps.
Developers choose react-planet for its simplicity, extensive customization options, and smooth physics-based animations powered by react-spring. It offers a declarative API, supports nested menus, and provides fine-grained control over orbit styles, satellite orientation, and interactive behaviors.
A react lib for building circular menus in a very easy and handy way.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
The Planet component allows building circular menus with minimal code, as shown in the basic example where children are added as satellites with centerContent.
Supports fine-tuned orbit styles via orbitStyle prop, satellite orientations, and physics parameters like mass and tension, enabling tailored visual and interactive effects.
Includes drag-and-drop for satellites and planets, bounce effects, and auto-close functionality, making menus engaging without extra libraries.
Planetception feature enables hierarchical circular menus, useful for complex navigation, demonstrated in the nested planets storybook example.
Only suitable for circular menus, so it's not a general-purpose UI library and may be overkill for projects needing diverse component types.
Fine-tuning mass, tension, and friction requires understanding of animation principles, which can be daunting and error-prone for developers unfamiliar with react-spring.
The README doesn't address ARIA roles or keyboard navigation, forcing developers to manually implement accessibility features, increasing development overhead.