{"id":14984384,"url":"https://github.com/whlshy/react-chrome-tabs","last_synced_at":"2026-01-03T21:05:23.992Z","repository":{"id":65419319,"uuid":"487787938","full_name":"whlshy/react-chrome-tabs","owner":"whlshy","description":"React Chrome Tabs","archived":false,"fork":false,"pushed_at":"2022-11-22T03:09:31.000Z","size":1078,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-27T07:33:44.565Z","etag":null,"topics":["chrome","chrome-tabs","dsese","jable","node","react","tabs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/whlshy.png","metadata":{"files":{"readme":"ReadMe.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-02T09:33:50.000Z","updated_at":"2023-09-08T18:34:09.000Z","dependencies_parsed_at":"2023-01-22T18:15:30.986Z","dependency_job_id":null,"html_url":"https://github.com/whlshy/react-chrome-tabs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whlshy%2Freact-chrome-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whlshy%2Freact-chrome-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whlshy%2Freact-chrome-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whlshy%2Freact-chrome-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whlshy","download_url":"https://codeload.github.com/whlshy/react-chrome-tabs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243910821,"owners_count":20367545,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","chrome-tabs","dsese","jable","node","react","tabs"],"created_at":"2024-09-24T14:08:57.682Z","updated_at":"2026-01-03T21:05:23.943Z","avatar_url":"https://github.com/whlshy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Chrome Tabs\n\nReact Chrome Tabs 是基於 [adamschwartz](https://github.com/adamschwartz) 的 [chrome-tabs](https://github.com/adamschwartz/chrome-tabs) 的 React 版本\n\n# [Oneline Demo](https://whlshy.github.io/react-chrome-tabs/)\n\n上面連結是 React Chrome Tabs 的基本展示\n\n## Install\n\n#### 必要套件\n\n* `react`: \u003e=16.8.0\n* `react-dom`: \u003e=16.8.0\n* `prop-types`: ^15.8.1\n\n#### Install React Chrome Tabs\n\n```\nnpm i react-chrome-tabs --save\n```\n\n## Usage\n\n```jsx\nimport React, { useState } from 'react'\nimport { render } from 'react-dom'\nimport ChromeTabs from 'react-chrome-tabs'\n\nlet [tabs, setTabs] = useState([\n  { key: 0, favicon: \"https://raw.githubusercontent.com/adamschwartz/chrome-tabs/gh-pages/demo/images/google-favicon.ico\", title: \"Google\" },\n  { key: 1, favicon: \"https://raw.githubusercontent.com/adamschwartz/chrome-tabs/gh-pages/demo/images/facebook-favicon.ico\", title: \"Facebook\" },\n  { key: 2, favicon: \"https://it108.wke.csie.ncnu.edu.tw/edu.ico\", title: \"IT Technology\" }\n])\n\nrender(\n    \u003cChromeTabs \n      currentTabs={tabs}\n      onChange={tabs =\u003e setTabs(tabs)}\n    /\u003e\n    , document.getElementById('root')\n)\n```\n\n## PROPS \u0026 METHODS\n\n|Prop name|Type|Default|Description|\n|---|---|---|---|\n|className|string|||\n|dark|bool|`false`||\n|defaultCurrent|number|||\n|currentTabs|array|`[]`|分頁陣列 e.g. `[{key: \"num or str\", \"favicion\": \"url\", \"title\": \"title\"}]`|\n|onChange|func|`(tabs) =\u003e {}`||\n|onClick|func|`(key) =\u003e {}`||\n|onClose|func|`(key) =\u003e {}`||\n|style|object|`{}`|| \n\n# Change Log\n\n## 2.0.1\n- defaultTabs =\u003e currentTabs\n- 內部component不再控制tabs (都由onChange傳到外層變化currentTabs)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhlshy%2Freact-chrome-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhlshy%2Freact-chrome-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhlshy%2Freact-chrome-tabs/lists"}