{"_id":"@akoskovacs/chromus-tabus","_rev":"2-6d11fcff42e6fe91f0b7a60c653f7bfe","name":"@akoskovacs/chromus-tabus","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@akoskovacs/chromus-tabus","version":"1.0.0","keywords":["chrome","tabs","html","react"],"author":{"name":"Adam Schwartz"},"license":"MIT","_id":"@akoskovacs/chromus-tabus@1.0.0","maintainers":[{"name":"akoskovacs","email":"akoskovacs0@gmail.com"}],"homepage":"https://github.com/akoskovacs/chromus-tabus#readme","bugs":{"url":"https://github.com/akoskovacs/chromus-tabus/issues"},"dist":{"shasum":"01ae1263207c154b71e6ddd1b27b35893ace8078","tarball":"https://registry.npmjs.org/@akoskovacs/chromus-tabus/-/chromus-tabus-1.0.0.tgz","fileCount":22,"integrity":"sha512-/Jbs5pXHooN98ZCYSRlEuSSPT3cIc45EkPxWOnLvo5wSN4CgaWPj0PzfHQ5o/EEFsDfMxFlLomRB7gQx2/zKTg==","signatures":[{"sig":"MEQCIArtaC1rct+h4zBggwh9JlWoJyxR31efwpcyCHeyx+f4AiAZDClyTWv+KgHKJHvjxqLxTQZMD1pCcMS8WvusKCWwOA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":198132},"main":"dist/index.js","type":"commonjs","types":"./dist/index.d.ts","gitHead":"8016510a58906a6113886e099756a1c20d1adc70","scripts":{"start":"webpack serve","prepublishOnly":"tsc"},"_npmUser":{"name":"akoskovacs","email":"akoskovacs0@gmail.com"},"repository":{"url":"git+https://github.com/akoskovacs/chromus-tabus.git","type":"git"},"_npmVersion":"11.0.0","description":"React Chrome-style tabs","directories":{},"_nodeVersion":"22.11.0","dependencies":{"webpack":"^5.74.0","typescript":"^4.8.4","draggabilly":"2.2.0","webpack-cli":"^4.10.0","lodash.isequal":"^4.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","react-dom":"^18.2.0","ts-loader":"^9.4.1","css-loader":"^6.7.1","@babel/core":"^7.14.3","@types/react":"^18.2.45","babel-loader":"^8.2.2","style-loader":"^3.3.1","@types/react-dom":"^18.0.8","@types/draggabilly":"^2.1.2","webpack-dev-server":"^4.11.1","html-webpack-plugin":"^5.5.0","@types/lodash.isequal":"^4.5.5"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/chromus-tabus_1.0.0_1741643055022_0.7338999015545526","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@akoskovacs/chromus-tabus","version":"1.0.1","description":"React Chrome-style tabs","keywords":["chrome","tabs","html","react"],"homepage":"https://github.com/akoskovacs/chromus-tabus#readme","bugs":{"url":"https://github.com/akoskovacs/chromus-tabus/issues"},"repository":{"type":"git","url":"git+https://github.com/akoskovacs/chromus-tabus.git"},"license":"MIT","author":{"name":"Adam Schwartz"},"type":"commonjs","main":"dist/index.js","scripts":{"prepublishOnly":"tsc","start":"webpack serve","build":"webpack build","test":"jest"},"dependencies":{"draggabilly":"2.2.0","lodash.isequal":"^4.5.0","typescript":"^4.8.4","webpack":"^5.74.0","webpack-cli":"^4.10.0"},"devDependencies":{"@babel/core":"^7.14.3","@types/draggabilly":"^2.1.2","@types/jest":"^29.5.14","@types/lodash.isequal":"^4.5.5","@types/react":"^18.2.45","@types/react-dom":"^18.0.8","babel-loader":"^8.2.2","css-loader":"^6.7.1","html-webpack-plugin":"^5.5.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","jsdom":"^26.0.0","react":"^18.2.0","react-dom":"^18.2.0","style-loader":"^3.3.1","ts-jest":"^29.2.6","ts-loader":"^9.4.1","ts-node":"^10.9.2","webpack-dev-server":"^4.11.1"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"publishConfig":{"access":"public"},"_id":"@akoskovacs/chromus-tabus@1.0.1","gitHead":"f0ed209e3d3483e9355370d9b0f2123427139846","types":"./dist/index.d.ts","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-NZELcqWHZf2ERLTGI9IzYgvp5ru6APunOKtExutSYre7MFyRySt71M3GqGg490YxqvLx/kkeRSlxJMWNxysckg==","shasum":"7126b9cde8a0b78a9ed3039e0e7dd368cd738c32","tarball":"https://registry.npmjs.org/@akoskovacs/chromus-tabus/-/chromus-tabus-1.0.1.tgz","fileCount":34,"unpackedSize":202738,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIG4xfqjFAOeIUI/lQXwqoapjK+EGtkEC2tIkzvARhdniAiAlalQw1j4nS+7zQo7f7t2qDqy/fnKwB/IXHcw2l6js3A=="}]},"_npmUser":{"name":"akoskovacs","email":"akoskovacs0@gmail.com"},"directories":{},"maintainers":[{"name":"akoskovacs","email":"akoskovacs0@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chromus-tabus_1.0.1_1741645366511_0.47284826213382214"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-10T21:44:14.921Z","modified":"2025-03-10T22:22:46.949Z","1.0.0":"2025-03-10T21:44:15.276Z","1.0.1":"2025-03-10T22:22:46.787Z"},"bugs":{"url":"https://github.com/akoskovacs/chromus-tabus/issues"},"author":{"name":"Adam Schwartz"},"license":"MIT","homepage":"https://github.com/akoskovacs/chromus-tabus#readme","keywords":["chrome","tabs","html","react"],"repository":{"type":"git","url":"git+https://github.com/akoskovacs/chromus-tabus.git"},"description":"React Chrome-style tabs","maintainers":[{"name":"akoskovacs","email":"akoskovacs0@gmail.com"}],"readme":"# React Chrome Tabs\n\n![](./react-chrome-tabs.gif)\n\n[codesandbox](https://codesandbox.io/embed/eager-galois-hq8uxb?fontsize=14&hidenavigation=1&theme=dark)\n\n## Installation\n\n> yarn add @akoskovacs/chromus-tabus\n\n> pnpm add @akoskovacs/chromus-tabus\n\n## Usage\n\n```tsx\nimport { Tabs, TabProperties } from \"@sinm/react-chrome-tabs\";\nimport '@sinm/react-chrome-tabs/css/chrome-tabs.css';\n\nconst [tabs, setTabs] = useState<TabProperties[]>([\n  { id: \"abc\", favicon: fb, title: \"测试\", active: true },\n]);\n\n<Tabs\n  onTabClose={close}\n  onTabReorder={reorder}\n  onTabActive={active}\n  tabs={tabs}\n/>\n```\n\n## Example\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { useState } from \"react\";\nimport { Tabs, TabProperties } from \"@sinm/react-chrome-tabs\";\nimport '@sinm/react-chrome-tabs/css/chrome-tabs.css';\n// for dark mode\nimport '@sinm/react-chrome-tabs/css/chrome-tabs-dark-theme.css';\n\nimport fb from \"./images/facebook-favicon.ico\";\nimport google from \"./images/google-favicon.ico\";\n\nlet id = 1;\n\nfunction App() {\n  const [tabs, setTabs] = useState<TabProperties[]>([\n    { id: \"abc\", favicon: fb, title: \"测试\", active: true },\n  ]);\n\n  const addTab = () => {\n    id++;\n    setTabs([\n      ...tabs,\n      {\n        id: `tab-id-${id}`,\n        title: `New Tabs ${id}`,\n        favicon: tabs.length % 2 ? fb : google,\n      },\n    ]);\n  };\n\n  const active = (id: string) => {\n    setTabs(tabs.map((tab) => ({ ...tab, active: id === tab.id })));\n  };\n\n  const close = (id: string) => {\n    setTabs(tabs.filter((tab) => tab.id !== id));\n  };\n\n  const reorder = (tabId: string, fromIndex: number, toIndex: number) => {\n    const beforeTab = tabs.find(tab => tab.id === tabId);\n    if (!beforeTab) {\n        return;\n    }\n    let newTabs = tabs.filter(tab => tab.id !== tabId);\n    newTabs.splice(toIndex, 0, beforeTab);\n    setTabs(newTabs);\n  };\n  const closeAll = () => setTabs([]);\n  return (\n    <div>\n      <Tabs\n        darkMode={false}\n        onTabClose={close}\n        onTabReorder={reorder}\n        onTabActive={active}\n        tabs={tabs}\n        pinnedRight={<button onClick={addTabWithIcon}>+</button>}\n      ></Tabs>\n      <button onClick={addTab}>Add Tab</button>\n      <button onClick={closeAll}>Close All</button>\n    </div>\n  );\n}\n```\n\nMore Examples see\n\n- [Demo Code](./demo/index.tsx)\n- [ONote Tabs](https://github.com/pansinm/ONote/blob/master/packages/renderer/src/main/containers/ResourceTabs/index.tsx)\n\n\n## Component Props\n\n| name          | type          | description                     |\n| ------------- | ------------- | ------------------------------- |\n| darkMode      | boolean       | dark mode                       |\n| className     | string        | class name for tabs container   |\n| tabs          | TabProperties | tabs to render                  |\n| onTabActive   | Function      | when tab active                 |\n| onTabClose    | Function      | when tab close                  |\n| onTabReorder  | Function      | when tab drag to reorder        |\n| onContextMenu | Function      | when trigger context menu event |\n\n## TabProperties\n```ts\nexport interface TabProperties {\n  id: string;\n  title: string;\n  active?: boolean;\n  // favicon background image\n  favicon?: boolean | string;\n  // favicon class\n  faviconClass?: string;\n  // default true\n  isCloseIconVisible?: boolean;\n}\n```\n\n## Run Demo\n```bash\ngit clone https://github.com/akoskovacs/chromus-tabus.git\ncd react-chrome-tabs\npnpm install\npnpm run start\n# visit http://localhost:8080/\n```\n","readmeFilename":"README.md"}