{"_id":"@asafarim/markdown-explorer-viewer","_rev":"4-22bb731c9dc34497e6111942ee4e4c4c","name":"@asafarim/markdown-explorer-viewer","dist-tags":{"latest":"1.2.3"},"versions":{"1.2.0":{"name":"@asafarim/markdown-explorer-viewer","version":"1.2.0","keywords":["asafarim","react","typescript","markdown","viewer","explorer","file-tree","documentation"],"author":{"name":"Ali Safari"},"license":"MIT","_id":"@asafarim/markdown-explorer-viewer@1.2.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://github.com/AliSafari-IT/asafarim-webapp/tree/main/packages/markdown-explorer-viewer","bugs":{"url":"https://github.com/AliSafari-IT/asafarim-webapp/issues"},"dist":{"shasum":"88d941a9d664d9e2701d62163d088899b4698ee6","tarball":"https://registry.npmjs.org/@asafarim/markdown-explorer-viewer/-/markdown-explorer-viewer-1.2.0.tgz","fileCount":329,"integrity":"sha512-8lToctqUw39OPxT6yAtyJ1NLugV9DWnq00o677UCA2QTygwUinCs7WbnNZAfUvuNPe1BQ2fXeA0pZuuIxIktqQ==","signatures":[{"sig":"MEUCIQDa2rjjDoNzgQeyxEGVpywgCK3SPXBuAAHnPgUo17kQ4wIgAoUZrQVJFZKPULjNSzuyWTnS1WgO+HMLGJeZkL+KK3Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27914253},"main":"dist/index.js","type":"module","_from":"file:asafarim-markdown-explorer-viewer-1.2.0.tgz","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"all":"pnpm i && pnpm run build","dev":"rollup -c -w","demo":"pnpm build && cd demo && pnpm run build && pnpm dev","build":"rollup -c","clean":"rimraf dist"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\f480f4784c57ab3fa16dfb6d35507044\\asafarim-markdown-explorer-viewer-1.2.0.tgz","_integrity":"sha512-8lToctqUw39OPxT6yAtyJ1NLugV9DWnq00o677UCA2QTygwUinCs7WbnNZAfUvuNPe1BQ2fXeA0pZuuIxIktqQ==","_npmVersion":"11.4.2","description":"A reusable React component for exploring and viewing markdown files with file tree navigation","directories":{},"_nodeVersion":"20.18.3","dependencies":{"remark-gfm":"^4.0.0","highlight.js":"^11.9.0","react-markdown":"^9.0.1","rehype-highlight":"^7.0.0","react-syntax-highlighter":"^15.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^5.0.5","rollup":"^4.9.2","typescript":"^5.3.3","@types/react":"^18.2.43","@types/react-dom":"^18.2.17","rollup-plugin-copy":"^3.5.0","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3","@types/react-syntax-highlighter":"^15.5.11"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/markdown-explorer-viewer_1.2.0_1752413140841_0.5578457617823076","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@asafarim/markdown-explorer-viewer","version":"1.2.1","keywords":["asafarim","react","typescript","markdown","viewer","explorer","file-tree","documentation"],"author":{"name":"Ali Safari"},"license":"MIT","_id":"@asafarim/markdown-explorer-viewer@1.2.1","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://github.com/AliSafari-IT/asafarim-webapp/tree/main/packages/markdown-explorer-viewer","bugs":{"url":"https://github.com/AliSafari-IT/asafarim-webapp/issues"},"dist":{"shasum":"c9b53ab20de2585b3498c6771fed31f6cbd8c7e4","tarball":"https://registry.npmjs.org/@asafarim/markdown-explorer-viewer/-/markdown-explorer-viewer-1.2.1.tgz","fileCount":329,"integrity":"sha512-u6tm3xmkNxgnt/okQ9HzbzGa3/IjNBL8jChPlS9bzn/QIcW635IKn892VDMb8hFfk+dSytO9+xyjBYmEQOOjGQ==","signatures":[{"sig":"MEUCIBdINc+PiFxiJa6QplJZJIZ1akMCtkhN8r6nP9978gqNAiEA1ErPhQ/fHQez8tRkJEqRolQcgI8R4naXCnkSCShl4nI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27914267},"main":"dist/index.js","type":"module","_from":"file:asafarim-markdown-explorer-viewer-1.2.1.tgz","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"all":"pnpm i && pnpm run build","dev":"rollup -c -w","demo":"pnpm build && cd demo && pnpm run build && pnpm dev","build":"rollup -c","clean":"rimraf dist"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\ba8a15dcd1aeaef645d97acb605ef8cc\\asafarim-markdown-explorer-viewer-1.2.1.tgz","_integrity":"sha512-u6tm3xmkNxgnt/okQ9HzbzGa3/IjNBL8jChPlS9bzn/QIcW635IKn892VDMb8hFfk+dSytO9+xyjBYmEQOOjGQ==","_npmVersion":"11.4.2","description":"A reusable React component for exploring and viewing markdown files with file tree navigation","directories":{},"_nodeVersion":"20.18.3","dependencies":{"remark-gfm":"^4.0.0","highlight.js":"^11.9.0","react-markdown":"^9.0.1","rehype-highlight":"^7.0.0","react-syntax-highlighter":"^15.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^5.0.5","rollup":"^4.9.2","typescript":"^5.3.3","@types/react":"^18.2.43","@types/react-dom":"^18.2.17","rollup-plugin-copy":"^3.5.0","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3","@types/react-syntax-highlighter":"^15.5.11"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/markdown-explorer-viewer_1.2.1_1752413479324_0.043586348743673176","host":"s3://npm-registry-packages-npm-production"}},"1.2.2":{"name":"@asafarim/markdown-explorer-viewer","version":"1.2.2","keywords":["asafarim","react","typescript","markdown","viewer","explorer","file-tree","documentation"],"author":{"name":"Ali Safari"},"license":"MIT","_id":"@asafarim/markdown-explorer-viewer@1.2.2","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://github.com/AliSafari-IT/asafarim-webapp/tree/main/packages/markdown-explorer-viewer","bugs":{"url":"https://github.com/AliSafari-IT/asafarim-webapp/issues"},"dist":{"shasum":"b7644eae3860c3f00803154773253a5f58faf066","tarball":"https://registry.npmjs.org/@asafarim/markdown-explorer-viewer/-/markdown-explorer-viewer-1.2.2.tgz","fileCount":329,"integrity":"sha512-LV9/ftaPkTzg7Y6tK6Ugr1BqqPKzwbMQeDZ/65OsRrs+BkA9TkNqc7eLDPAl93Gw5GfRtgam+n7pJa7R/GNwfA==","signatures":[{"sig":"MEYCIQDopg0uuaAVwNdRX+cudQyn2SZ+H81be6vt5Q8yv/7vpgIhAN5Ah+ytK0mD+kgROR+/sBfG78/BeM/jRN/z1RIunllM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27914265},"main":"dist/index.js","type":"module","_from":"file:asafarim-markdown-explorer-viewer-1.2.2.tgz","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"all":"pnpm i && pnpm run build","dev":"rollup -c -w","demo":"pnpm build && cd demo && pnpm run build && pnpm dev","build":"rollup -c","clean":"rimraf dist"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\af8b5c2437570971c34723a9f5341e46\\asafarim-markdown-explorer-viewer-1.2.2.tgz","_integrity":"sha512-LV9/ftaPkTzg7Y6tK6Ugr1BqqPKzwbMQeDZ/65OsRrs+BkA9TkNqc7eLDPAl93Gw5GfRtgam+n7pJa7R/GNwfA==","_npmVersion":"11.4.2","description":"A reusable React component for exploring and viewing markdown files with file tree navigation","directories":{},"_nodeVersion":"20.18.3","dependencies":{"remark-gfm":"^4.0.0","highlight.js":"^11.9.0","react-markdown":"^9.0.1","rehype-highlight":"^7.0.0","react-syntax-highlighter":"^15.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^5.0.5","rollup":"^4.9.2","typescript":"^5.3.3","@types/react":"^18.2.43","@types/react-dom":"^18.2.17","rollup-plugin-copy":"^3.5.0","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3","@types/react-syntax-highlighter":"^15.5.11"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/markdown-explorer-viewer_1.2.2_1752413629995_0.9822610318694993","host":"s3://npm-registry-packages-npm-production"}},"1.2.3":{"name":"@asafarim/markdown-explorer-viewer","version":"1.2.3","description":"A reusable React component for exploring and viewing markdown files with file tree navigation","type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","keywords":["asafarim","react","typescript","markdown","viewer","explorer","file-tree","documentation"],"author":{"name":"Ali Safari"},"license":"MIT","peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"dependencies":{"highlight.js":"^11.9.0","react-markdown":"^9.0.1","react-syntax-highlighter":"^15.5.0","rehype-highlight":"^7.0.0","remark-gfm":"^4.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@types/react":"^18.2.43","@types/react-dom":"^18.2.17","@types/react-syntax-highlighter":"^15.5.11","rimraf":"^5.0.5","rollup":"^4.9.2","rollup-plugin-copy":"^3.5.0","rollup-plugin-postcss":"^4.0.2","typescript":"^5.3.3"},"homepage":"https://github.com/AliSafari-IT/asafarim-webapp/tree/main/packages/markdown-explorer-viewer","bugs":{"url":"https://github.com/AliSafari-IT/asafarim-webapp/issues"},"publishConfig":{"access":"public"},"scripts":{"build":"rollup -c","dev":"rollup -c -w","all":"pnpm i && pnpm run build","clean":"rimraf dist","demo":"pnpm build && cd demo && pnpm run build && pnpm dev"},"_id":"@asafarim/markdown-explorer-viewer@1.2.3","_integrity":"sha512-9IEB4IwcicqjgUNbMX076o2HaXM5QhlTRF7sK3JSfjainL+pt60Q7iT/iqnNUgcOzp6XhqlF/DWZ93vWQV6edw==","_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\1194246728e86ca5a874d1a2919ff067\\asafarim-markdown-explorer-viewer-1.2.3.tgz","_from":"file:asafarim-markdown-explorer-viewer-1.2.3.tgz","_nodeVersion":"20.18.3","_npmVersion":"11.4.2","dist":{"integrity":"sha512-9IEB4IwcicqjgUNbMX076o2HaXM5QhlTRF7sK3JSfjainL+pt60Q7iT/iqnNUgcOzp6XhqlF/DWZ93vWQV6edw==","shasum":"131dde6cdf62256d1ced25b28307b935583ad69f","tarball":"https://registry.npmjs.org/@asafarim/markdown-explorer-viewer/-/markdown-explorer-viewer-1.2.3.tgz","fileCount":329,"unpackedSize":27914437,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD3PjSqu0lc3vpdKWGj0SfwihAyUVaPfR4PiFY0EKQXFAIhAJcxP805GktWsMUZTk7LtRMJQ7sXVSNOC9z2lpWSzK0d"}]},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"directories":{},"maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/markdown-explorer-viewer_1.2.3_1752414956675_0.2641508178369496"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-13T13:25:40.683Z","modified":"2025-07-13T13:55:57.151Z","1.2.0":"2025-07-13T13:25:41.157Z","1.2.1":"2025-07-13T13:31:19.700Z","1.2.2":"2025-07-13T13:33:50.274Z","1.2.3":"2025-07-13T13:55:56.960Z"},"bugs":{"url":"https://github.com/AliSafari-IT/asafarim-webapp/issues"},"author":{"name":"Ali Safari"},"license":"MIT","homepage":"https://github.com/AliSafari-IT/asafarim-webapp/tree/main/packages/markdown-explorer-viewer","keywords":["asafarim","react","typescript","markdown","viewer","explorer","file-tree","documentation"],"description":"A reusable React component for exploring and viewing markdown files with file tree navigation","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"readme":"# @asafarim/markdown-explorer-viewer\r\n\r\nA powerful, flexible React component for exploring and viewing markdown files with an integrated file tree navigation system. Perfect for documentation sites, static site generators, and any application that needs to display markdown content with file system navigation.\r\n\r\n## ✨ Features\r\n\r\n- 🗂️ **File Tree Navigation** - Interactive folder/file browser with expand/collapse\r\n- 📝 **Markdown Rendering** - Full GitHub Flavored Markdown support with syntax highlighting\r\n- 🔍 **Search & Filter** - Search through files and folders with real-time filtering\r\n- 🎨 **Themeable** - Built-in light/dark themes with auto system detection\r\n- 📱 **Responsive Design** - Mobile-friendly with collapsible sidebar\r\n- 🧭 **Breadcrumb Navigation** - Easy navigation with clickable breadcrumbs\r\n- ⚡ **Performance Optimized** - Lazy loading and efficient rendering\r\n- ♿ **Accessible** - Full keyboard navigation and screen reader support\r\n- 🎯 **TypeScript First** - Complete type safety and IntelliSense support\r\n- 🔗 **Router Integration** - Works seamlessly with React Router and other routers\r\n\r\n## � Demo Preview\r\n\r\n![Markdown Explorer Viewer Demo](https://github.com/AliSafari-IT/asafarim-webapp/blob/main/packages/markdown-explorer-viewer/markdown-explorer-viewer-demo.png)\r\n\r\n*Live demo showing the file tree navigation, markdown rendering with syntax highlighting, search functionality, and responsive design.*\r\n\r\n## �📦 Installation\r\n\r\n```bash\r\nnpm install @asafarim/markdown-explorer-viewer\r\n# or\r\nyarn add @asafarim/markdown-explorer-viewer\r\n# or\r\npnpm add @asafarim/markdown-explorer-viewer\r\n```\r\n\r\n### Peer Dependencies\r\n\r\n```bash\r\nnpm install react react-dom react-router-dom\r\n```\r\n\r\n## 🚀 Quick Start\r\n\r\n### Basic Usage\r\n\r\n```tsx\r\nimport { MarkdownExplorer } from '@asafarim/markdown-explorer-viewer';\r\nimport { parseFileTree } from '@asafarim/markdown-explorer-viewer';\r\n\r\n// Create a virtual file tree from your markdown content\r\nconst files = {\r\n  '/docs/README.md': '# Welcome\\n\\nThis is the main documentation.',\r\n  '/docs/getting-started.md': '# Getting Started\\n\\nFollow these steps...',\r\n  '/docs/api/overview.md': '# API Overview\\n\\nOur API provides...',\r\n  '/docs/api/reference.md': '# API Reference\\n\\nComplete API documentation.'\r\n};\r\n\r\nconst fileTree = parseFileTree(files);\r\n\r\nfunction App() {\r\n  return (\r\n    <div style={{ height: '100vh' }}>\r\n      <MarkdownExplorer\r\n        fileTree={fileTree}\r\n        theme=\"dark\"\r\n        showBreadcrumbs={true}\r\n        enableSearch={true}\r\n        initialRoute=\"/docs/README.md\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### With React Router Integration\r\n\r\n```tsx\r\nimport { MarkdownExplorer } from '@asafarim/markdown-explorer-viewer';\r\nimport { useNavigate, useLocation } from 'react-router-dom';\r\n\r\nfunction DocumentationPage() {\r\n  const navigate = useNavigate();\r\n  const location = useLocation();\r\n\r\n  const handleNavigate = (path: string) => {\r\n    navigate(`/docs${path}`);\r\n  };\r\n\r\n  return (\r\n    <MarkdownExplorer\r\n      fileTree={docsFileTree}\r\n      initialRoute={location.pathname.replace('/docs', '')}\r\n      onNavigate={handleNavigate}\r\n      theme=\"auto\"\r\n      showFileTree={true}\r\n      enableSearch={true}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Custom File Tree Structure\r\n\r\n```tsx\r\nimport { FileNode } from '@asafarim/markdown-explorer-viewer';\r\n\r\nconst customFileTree: FileNode = {\r\n  name: 'Documentation',\r\n  path: '/',\r\n  type: 'folder',\r\n  children: [\r\n    {\r\n      name: 'Introduction',\r\n      path: '/intro',\r\n      type: 'folder',\r\n      children: [\r\n        {\r\n          name: 'Overview.md',\r\n          path: '/intro/overview.md',\r\n          type: 'file',\r\n          content: '# Overview\\n\\nWelcome to our documentation...'\r\n        }\r\n      ]\r\n    },\r\n    {\r\n      name: 'Guide.md',\r\n      path: '/guide.md',\r\n      type: 'file',\r\n      content: '# User Guide\\n\\nThis guide will help you...'\r\n    }\r\n  ]\r\n};\r\n\r\n<MarkdownExplorer fileTree={customFileTree} />\r\n```\r\n\r\n## 📚 API Reference\r\n\r\n### MarkdownExplorer Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `fileTree` | `FileNode` | `undefined` | Virtual file tree structure |\r\n| `rootPath` | `string` | `'/'` | Root path for navigation |\r\n| `theme` | `'light' \\| 'dark' \\| 'auto'` | `'auto'` | Color theme |\r\n| `className` | `string` | `''` | Additional CSS class |\r\n| `initialRoute` | `string` | `undefined` | Initial path to navigate to |\r\n| `onNavigate` | `(path: string, node: FileNode) => void` | `undefined` | Navigation callback |\r\n| `enableSearch` | `boolean` | `true` | Enable file search |\r\n| `searchPlaceholder` | `string` | `'Search files...'` | Search input placeholder |\r\n| `showIcons` | `boolean` | `true` | Show file/folder icons |\r\n| `showFileTree` | `boolean` | `true` | Show file tree sidebar |\r\n| `renderFileIcon` | `(node: FileNode) => ReactNode` | `undefined` | Custom file icon renderer |\r\n| `renderFolderIcon` | `(node: FileNode) => ReactNode` | `undefined` | Custom folder icon renderer |\r\n| `sidebarWidth` | `string` | `'280px'` | Sidebar width |\r\n| `showBreadcrumbs` | `boolean` | `true` | Show breadcrumb navigation |\r\n| `markdownComponents` | `Record<string, ComponentType>` | `undefined` | Custom markdown components |\r\n\r\n### FileNode Structure\r\n\r\n```typescript\r\ninterface FileNode {\r\n  name: string;           // Display name\r\n  path: string;           // Full path\r\n  type: 'file' | 'folder'; // Node type\r\n  children?: FileNode[];  // Child nodes (for folders)\r\n  content?: string;       // File content (for files)\r\n  lastModified?: string;  // Last modification date\r\n  size?: number;          // File size in bytes\r\n}\r\n```\r\n\r\n### Utility Functions\r\n\r\n#### `parseFileTree(files: Record<string, string>): FileNode`\r\n\r\nConverts a flat file structure into a hierarchical tree.\r\n\r\n```tsx\r\nconst files = {\r\n  '/docs/README.md': '# Documentation',\r\n  '/docs/guide/setup.md': '# Setup Guide',\r\n  '/docs/guide/usage.md': '# Usage Examples'\r\n};\r\n\r\nconst tree = parseFileTree(files);\r\n```\r\n\r\n#### `findNodeByPath(tree: FileNode, path: string): FileNode | null`\r\n\r\nFinds a specific node in the tree by its path.\r\n\r\n```tsx\r\nconst node = findNodeByPath(fileTree, '/docs/README.md');\r\n```\r\n\r\n#### `searchNodes(tree: FileNode, query: string): FileNode[]`\r\n\r\nSearches for nodes matching the query.\r\n\r\n```tsx\r\nconst results = searchNodes(fileTree, 'api');\r\n```\r\n\r\n## 🎨 Theming & Customization\r\n\r\n### CSS Custom Properties\r\n\r\nThe component uses CSS custom properties for theming:\r\n\r\n```css\r\n:root {\r\n  --me-primary: #2563eb;\r\n  --me-primary-hover: #1d4ed8;\r\n  --me-text-primary: #1f2937;\r\n  --me-text-secondary: #6b7280;\r\n  --me-bg-primary: #ffffff;\r\n  --me-bg-secondary: #f9fafb;\r\n  --me-border: #e5e7eb;\r\n  --me-radius: 0.375rem;\r\n  --me-sidebar-width: 280px;\r\n}\r\n\r\n[data-theme=\"dark\"] {\r\n  --me-text-primary: #f9fafb;\r\n  --me-text-secondary: #d1d5db;\r\n  --me-bg-primary: #111827;\r\n  --me-bg-secondary: #1f2937;\r\n  --me-border: #374151;\r\n}\r\n```\r\n\r\n### Custom Styling\r\n\r\n```tsx\r\n<MarkdownExplorer\r\n  className=\"my-custom-explorer\"\r\n  fileTree={fileTree}\r\n  theme=\"dark\"\r\n/>\r\n```\r\n\r\n```css\r\n.my-custom-explorer {\r\n  border: 2px solid #2563eb;\r\n  border-radius: 8px;\r\n}\r\n\r\n.my-custom-explorer .file-tree {\r\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n}\r\n```\r\n\r\n### Custom Markdown Components\r\n\r\n```tsx\r\nconst customComponents = {\r\n  h1: ({ children }) => (\r\n    <h1 style={{ color: '#2563eb', borderBottom: '2px solid #2563eb' }}>\r\n      {children}\r\n    </h1>\r\n  ),\r\n  code: ({ children, className }) => (\r\n    <code className={className} style={{ background: '#f1f5f9' }}>\r\n      {children}\r\n    </code>\r\n  )\r\n};\r\n\r\n<MarkdownExplorer\r\n  fileTree={fileTree}\r\n  markdownComponents={customComponents}\r\n/>\r\n```\r\n\r\n## 🔧 Advanced Usage\r\n\r\n### File System Integration\r\n\r\n```tsx\r\n// Example with file system API\r\nasync function loadFileSystem() {\r\n  const files: Record<string, string> = {};\r\n  \r\n  // Load files from your source\r\n  files['/README.md'] = await fetch('/docs/README.md').then(r => r.text());\r\n  files['/guide.md'] = await fetch('/docs/guide.md').then(r => r.text());\r\n  \r\n  return parseFileTree(files);\r\n}\r\n\r\nfunction App() {\r\n  const [fileTree, setFileTree] = useState<FileNode | null>(null);\r\n  \r\n  useEffect(() => {\r\n    loadFileSystem().then(setFileTree);\r\n  }, []);\r\n  \r\n  if (!fileTree) return <div>Loading...</div>;\r\n  \r\n  return <MarkdownExplorer fileTree={fileTree} />;\r\n}\r\n```\r\n\r\n### Dynamic Content Loading\r\n\r\n```tsx\r\nfunction DynamicMarkdownExplorer() {\r\n  const [currentContent, setCurrentContent] = useState('');\r\n  \r\n  const handleNavigate = async (path: string, node: FileNode) => {\r\n    if (node.type === 'file' && !node.content) {\r\n      // Load content dynamically\r\n      const content = await fetch(`/api/files${path}`).then(r => r.text());\r\n      node.content = content;\r\n      setCurrentContent(content);\r\n    }\r\n  };\r\n  \r\n  return (\r\n    <MarkdownExplorer\r\n      fileTree={fileTree}\r\n      onNavigate={handleNavigate}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Search and Filter\r\n\r\n```tsx\r\nfunction SearchableExplorer() {\r\n  const [searchResults, setSearchResults] = useState<FileNode[]>([]);\r\n  \r\n  const handleSearch = (query: string) => {\r\n    if (query.trim()) {\r\n      const results = searchNodes(fileTree, query);\r\n      setSearchResults(results);\r\n    } else {\r\n      setSearchResults([]);\r\n    }\r\n  };\r\n  \r\n  return (\r\n    <div>\r\n      <input \r\n        type=\"text\" \r\n        placeholder=\"Search documentation...\" \r\n        onChange={(e) => handleSearch(e.target.value)}\r\n      />\r\n      \r\n      {searchResults.length > 0 && (\r\n        <div>\r\n          <h3>Search Results:</h3>\r\n          {searchResults.map(node => (\r\n            <div key={node.path}>{node.name}</div>\r\n          ))}\r\n        </div>\r\n      )}\r\n      \r\n      <MarkdownExplorer\r\n        fileTree={fileTree}\r\n        enableSearch={true}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## 🌍 Browser Support\r\n\r\n- Chrome (latest)\r\n- Firefox (latest)\r\n- Safari (latest)\r\n- Edge (latest)\r\n\r\n## 🤝 Contributing\r\n\r\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.\r\n\r\n## 📄 License\r\n\r\nMIT © [Ali Safari](https://github.com/AliSafari-IT)\r\n\r\n## 🔗 Related Packages\r\n\r\n- [`@asafarim/project-card`](../project-card) - Project showcase cards\r\n- [`@asafarim/display-code`](../display-code) - Syntax-highlighted code blocks\r\n- [`@asafarim/paginated-project-grid`](../paginated-project-grid) - Project grid with pagination\r\n","readmeFilename":"README.md"}