🪟 react-browser-components ✨

React component for browser-windows like containers, with tabs functionality.

npm i react-browser-components

| ChromeBrowser | ArcBrowser | | :------------------------------------: | :------------------------------: | | | |

You 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.

Basic Usage

import { ChromeBrowser, ArcBrowser } from "react-browser-components";
import { useState } from "react";

const App = () => {
  const [tab, setTab] = useState(0);
  const tabs = [
    {
      name: "Google",
      link: "https://google.com",
      content: <div>Content</div>,
      icon: (
        <img
          src="https://google.com/favicon.ico"
          style={{ width: "100%", height: "100%" }}
        />
      ),
    },
  ];

  return (
    <>
      <ChromeBrowser tabs={tabs} tab={tab} setTab={setTab} />
      <ArcBrowser tabs={tabs} tab={tab} setTab={setTab} />
    </>
  );
};

Props

| Name | Type | Description | | -------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | | theme | "light" \| "dark" | Theme of the browser, default is light. The light and dark theme of ArcBrowser is the same. | | tabs | Array<{name: string;link: string;content: React.ReactNode;icon: React.ReactNode;}> | Pages in the browser. | | shadow | boolean | Shadow of the browser, default is true. | | useContentSize | boolean | Default is false: browser will be the size of its parent element. True: browser will be the size of its content. | | contentScroll | boolean | If content inside the container should be scrollable, default is true. | | leftIcons | React.ReactNode | Leave empty for default icons. | | rightIcons | React.ReactNode | Leave empty for default icons. | | lightTheme | Theme | Changes the light theme of the browser. | | darkTheme | Theme | Changes the dark theme of the browser. | | children | React.ReactNode | Content displayed over all pages. | | tab | number | Active tab index. | | setTab | (tab: number) => void | Function to set the active tab index. |

export default interface Theme {
  theme: string;
  bg: string;
  text: string;
  contentBg: string;
  contentText: string;
  border: string;
  searchBarBg: string;
  tabBarBg: string;
  tabDivider: string;
  tabHoverBg: string;
  tabSelectedBg: string;
}

Development

To get started:

git clone https://github.com/EnhancedJax/react-browser-components.git
cd react-browser-components
npm i

Actions:

npm run storybook # start storybook
npm run build # build the library
npm run test # test the library

Testing in another project

npm run build
npm link
npm link "../your-project/node_modules/react"
cd ../your-project
npm link react-browser-components