# submenu-g

> Container component for page-level menu

Latest version **0.1.28** (published 2023-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install submenu-g
pnpm add submenu-g
yarn add submenu-g
bun add submenu-g
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.28 |
| Published | 2023-11-10 |
| First published | 2020-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 41.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | GantFDT |
| Maintainers | wujiaxian, liuyanlu, favori, eyelly, vvey, zhangdousang, solinma, yunfang |
| Keywords | React, gantd, antd, menu, layout, ui |

## Links

- npm: https://www.npmjs.com/package/submenu-g
- Repository: https://github.com/gantFDT/GantD
- Homepage: http://www.gant.design
- Issues: https://github.com/gantFDT/GantD/issues
- npm.io page: https://npm.io/package/submenu-g

## Dependencies (6)

- [antd](https://npm.io/package/antd.md) ^3.26.5
- [react](https://npm.io/package/react.md) ^16.12.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [data-cell-g](https://npm.io/package/data-cell-g.md) ^0.0.11

## 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

- 0.1.28 (latest) — 2023-11-10
- 0.1.26 — 2022-01-13
- 0.1.25 — 2021-09-30
- 0.1.24 — 2021-07-27
- 0.1.23 — 2021-04-07
- 0.1.22 — 2021-03-16
- 0.1.21 — 2021-03-02
- 0.1.20 — 2021-03-01
- 0.1.18 — 2020-12-29
- 0.1.17 — 2020-12-08
- 0.1.16 — 2020-08-31
- 0.1.15 — 2020-08-20
- 0.1.14 — 2020-08-02
- 0.1.13 — 2020-05-12
- 0.1.12 — 2020-05-01
- … 25 more at https://npm.io/package/submenu-g/versions

## README

# submenu-g

---
Submenu component based on antd with [`React`](https://facebook.github.io/react/)

[![NPM version][npm-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/submenu-g.svg
[npm-url]: https://www.npmjs.com/package/submenu-g

## Screenshot

<img src='https://zos.alipayobjects.com/rmsportal/JwLASrsOYJuFRIt.png' width='408'>

## Demo

online example: https://favori.gitee.io/gantd-landing (CodePen)

## install

[![rc-tabs](https://nodei.co/npm/submenu-g.png)](https://npmjs.org/package/submenu-g)

## Feature

- Can switch to the top
- Support magnetic absorption effect
- Fast page turn footer

## Usage

```js
import React from 'react';
import Submenu from 'submenu-g';
import { Icon } from 'antd';
import { UserOutlined } from '@ant-design/icons';

function BasicUse() {
    const menuData = [
    {
      title: 'menu_1',
      icon: <Icon type='idcard' />,
      path: 'personal',
      count: 10
    },
    {
      title: 'menu_2',
      icon: <Icon type='global' />,
      path: 'preferences',
      count: 10
    },
    {
      title: 'menu_3',
      icon: <Icon type='lock' />,
      path: 'editpwd',
      count: 10
    },
  ].map(item => ({ ...item, key: item.path }));

  const [selectedKey, setSelectedKey] = useState(menuData[0].path)
  const menuBoxRef = useRef(null);
  const onSelectedChange = (key, record, item) => setSelectedKey(key);
  const onSwitchChange = (mode) => {
    // console.log(mode)
  }
  const activeMenu = _.find(menuData, i => i.path === selectedKey)
  return (
    <Submenu
      menuData={menuData}
      selectedKey={selectedKey}
      width={180}
      setMenuBoxRef={ref => { menuBoxRef.current = ref }}
      showFlipOverFooter
      onCollapseChange={(collapsed) => {
        console.log(collapsed)
        console.log(menuBoxRef)
      }}
      onSelectedChange={onSelectedChange}
      onSwitchChange={onSwitchChange}
      extra={
        <div style={{ padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div>
            <Avatar size={64} icon={UserOutlined} />
            <div style={{ textAlign: 'center' }}>admin</div>
          </div>
        </div>
      }
    >
      <div style={{ padding: '20px', height: 400 }}>
        {activeMenu['title']}
      </div>
    </Submenu>
  )
}

React.render(<BasicUse/>, mountNode);
```

## API

[Documentation](https://jhildenbiddle.github.io/css-vars-ponyfill)

## Contact

- Create a [Github issue](https://github.com/jhildenbiddle/css-vars-ponyfill/issues) for bug reports, feature requests, or questions
- Follow [@GantFDT](https://twitter.com/jhildenbiddle) for announcements
- Add a ⭐️ [star on GitHub](https://github.com/jhildenbiddle/css-vars-ponyfill) to support the project❤️!

## Anthor 

GantFDT

## License

MIT

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