{"id":24986529,"url":"https://github.com/enhancedjax/react-browser-components","last_synced_at":"2025-04-11T22:50:51.272Z","repository":{"id":247048171,"uuid":"824495873","full_name":"EnhancedJax/react-browser-components","owner":"EnhancedJax","description":"Customizable browser-like frames, with tabs functionality (React). ","archived":false,"fork":false,"pushed_at":"2024-07-15T08:44:52.000Z","size":1002,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T00:50:00.314Z","etag":null,"topics":["react","reactcomponents","reactjs","reactlibrary","storybook"],"latest_commit_sha":null,"homepage":"https://react-browser-containers.jaxtam.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EnhancedJax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-05T08:57:45.000Z","updated_at":"2025-01-09T22:27:38.000Z","dependencies_parsed_at":"2024-07-09T05:09:30.955Z","dependency_job_id":"964d9519-a654-4207-80b6-83b23dfd292a","html_url":"https://github.com/EnhancedJax/react-browser-components","commit_stats":null,"previous_names":["enhancedjax/react-browser-containers","enhancedjax/react-browser-components"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EnhancedJax%2Freact-browser-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EnhancedJax%2Freact-browser-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EnhancedJax%2Freact-browser-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EnhancedJax%2Freact-browser-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EnhancedJax","download_url":"https://codeload.github.com/EnhancedJax/react-browser-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217146,"owners_count":21066633,"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":["react","reactcomponents","reactjs","reactlibrary","storybook"],"created_at":"2025-02-04T11:06:23.151Z","updated_at":"2025-04-11T22:50:51.253Z","avatar_url":"https://github.com/EnhancedJax.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🪟 react-browser-components ✨\n\nReact component for browser-windows like containers, with tabs functionality.\n\n```bash\nnpm i react-browser-components\n```\n\n![npm](https://img.shields.io/npm/v/react-browser-components)\n![GitHub license](https://img.shields.io/github/license/EnhancedJax/react-browser-components)\n![npm bundle size](https://img.shields.io/bundlephobia/min/react-browser-components)\n\n| ![](./images/chrome.png) ChromeBrowser | ![](./images/arc.png) ArcBrowser |\n| :------------------------------------: | :------------------------------: |\n|        ![](./images/chrome.jpg)        |      ![](./images/arc.jpg)       |\n\nYou can use the components to demonstrate functionality with browsers, or as decorative elements in your project. The components are not designed to be used as actual browsers.\n\n## Basic Usage\n\n```jsx\nimport { ChromeBrowser, ArcBrowser } from \"react-browser-components\";\nimport { useState } from \"react\";\n\nconst App = () =\u003e {\n  const [tab, setTab] = useState(0);\n  const tabs = [\n    {\n      name: \"Google\",\n      link: \"https://google.com\",\n      content: \u003cdiv\u003eContent\u003c/div\u003e,\n      icon: (\n        \u003cimg\n          src=\"https://google.com/favicon.ico\"\n          style={{ width: \"100%\", height: \"100%\" }}\n        /\u003e\n      ),\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cChromeBrowser tabs={tabs} tab={tab} setTab={setTab} /\u003e\n      \u003cArcBrowser tabs={tabs} tab={tab} setTab={setTab} /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n### Props\n\n| Name           | Type                                                                                 | Description                                                                                                      |\n| -------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |\n| theme          | `\"light\" \\| \"dark\"`                                                                  | Theme of the browser, default is light. The light and dark theme of ArcBrowser is the same.                      |\n| tabs           | `Array\u003c{name: string;link: string;content: React.ReactNode;icon: React.ReactNode;}\u003e` | Pages in the browser.                                                                                            |\n| shadow         | `boolean`                                                                            | Shadow of the browser, default is true.                                                                          |\n| useContentSize | `boolean`                                                                            | Default is false: browser will be the size of its parent element. True: browser will be the size of its content. |\n| contentScroll  | `boolean`                                                                            | If content inside the container should be scrollable, default is true.                                           |\n| leftIcons      | `React.ReactNode`                                                                    | Leave empty for default icons.                                                                                   |\n| rightIcons     | `React.ReactNode`                                                                    | Leave empty for default icons.                                                                                   |\n| lightTheme     | `Theme`                                                                              | Changes the light theme of the browser.                                                                          |\n| darkTheme      | `Theme`                                                                              | Changes the dark theme of the browser.                                                                           |\n| children       | `React.ReactNode`                                                                    | Content displayed over all pages.                                                                                |\n| tab            | `number`                                                                             | Active tab index.                                                                                                |\n| setTab         | `(tab: number) =\u003e void`                                                              | Function to set the active tab index.                                                                            |\n\n```js\nexport default interface Theme {\n  theme: string;\n  bg: string;\n  text: string;\n  contentBg: string;\n  contentText: string;\n  border: string;\n  searchBarBg: string;\n  tabBarBg: string;\n  tabDivider: string;\n  tabHoverBg: string;\n  tabSelectedBg: string;\n}\n```\n\n## Development\n\nTo get started:\n\n```bash\ngit clone https://github.com/EnhancedJax/react-browser-components.git\ncd react-browser-components\nnpm i\n```\n\nActions:\n\n```bash\nnpm run storybook # start storybook\nnpm run build # build the library\nnpm run test # test the library\n```\n\n### Testing in another project\n\n```bash\nnpm run build\nnpm link\nnpm link \"../your-project/node_modules/react\"\ncd ../your-project\nnpm link react-browser-components\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenhancedjax%2Freact-browser-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenhancedjax%2Freact-browser-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenhancedjax%2Freact-browser-components/lists"}