/react-3d-menu

React's 3D menu component. React 3D 菜单组件。

Primary LanguageTypeScriptMIT LicenseMIT

English | 中文

react-3d-menu

React's 3D menu component, which is easy to use and has a cool effect.

React 3D 菜单组件,使用简单效果炫酷。

NPM Version npm bundle size GitHub Actions Workflow Status GitHub License

Live Demo

Live demo on Github Pages

Installation

npm install react-3d-menu

Usage

You can custom the menu item, see more demos .

import { React3DMenu } from 'react-3d-menu';

const menuItems: React.ReactNode[] = [
    'item1 string',
    'item2 string',
    <SomeComponent />,
    <SomeComponent2 />
    // ...
];

export const MyComponent: React.FC = () => {
    return (
        <React3DMenu items={menuItems} className="my-menu">
            <div className="my-menu-head">React 3D Menu</div>
        </React3DMenu>
    );
};

Props

name type description
items React.ReactNode[] Menu items to render
children React.ReactNode Element to activate 3d menu when hover

LICENSE

MIT