@neo4j-ndl/react/skills/ndl-react/components/ai/more-files.md

React implementation of Neo4j Design System

# MoreFilesComponent

Import: `import { MoreFilesComponent } from '@neo4j-ndl/react/ai'`

## Props

### MoreFilesComponent

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `count` | `number` | ✅ |  | The number of files to show |
| `isActive` | `boolean` |  |  | Whether the more files button is active. Should be true when it opens the menu of files. |
| `onClick` | `(() => void)` |  |  | Callback function triggered when the more files button is clicked |
| `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Menu } from '@neo4j-ndl/react';
import { MoreFiles } from '@neo4j-ndl/react/ai';
import {
  DocumentIconOutline,
  PhotoIconOutline,
  TableCellsIconOutline,
} from '@neo4j-ndl/react/icons';
import { useRef, useState } from 'react';

const Component = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const anchorRef = useRef<HTMLButtonElement | null>(null);

  return (
    <>
      <MoreFiles
        count={3}
        isActive={isMenuOpen}
        onClick={() => setIsMenuOpen(!isMenuOpen)}
        ref={anchorRef}
      />
      <Menu
        isOpen={isMenuOpen}
        anchorRef={anchorRef}
        onClose={() => setIsMenuOpen(false)}
      >
        <Menu.Item
          leadingVisual={<DocumentIconOutline />}
          title="Science fiction bestseller"
          description="PDF"
          onClick={() => alert('Science fiction bestseller')}
        />
        <Menu.Item
          leadingVisual={<TableCellsIconOutline />}
          title="MoviesDecade"
          description="CSV"
          onClick={() => alert('MoviesDecade')}
        />
        <Menu.Item
          leadingVisual={<PhotoIconOutline />}
          title="Family photo"
          description="JPG"
          onClick={() => alert('Family photos')}
        />
      </Menu>
    </>
  );
};

export default Component;
```