Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enhancedjax/react-browser-components
Customizable browser-like frames, with tabs functionality (React).
https://github.com/enhancedjax/react-browser-components
react reactcomponents reactjs reactlibrary storybook
Last synced: 9 days ago
JSON representation
Customizable browser-like frames, with tabs functionality (React).
- Host: GitHub
- URL: https://github.com/enhancedjax/react-browser-components
- Owner: EnhancedJax
- License: mit
- Created: 2024-07-05T08:57:45.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-15T08:44:52.000Z (7 months ago)
- Last Synced: 2025-01-29T10:54:41.830Z (15 days ago)
- Topics: react, reactcomponents, reactjs, reactlibrary, storybook
- Language: TypeScript
- Homepage: https://react-browser-containers.jaxtam.dev
- Size: 979 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🪟 react-browser-components ✨
React component for browser-windows like containers, with tabs functionality.
```bash
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
```jsx
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:
Content,
icon: (
),
},
];
return (
<>
>
);
};
```
### 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. |
```js
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:
```bash
git clone https://github.com/EnhancedJax/react-browser-components.git
cd react-browser-components
npm i
```
Actions:
```bash
npm run storybook # start storybook
npm run build # build the library
npm run test # test the library
```
### Testing in another project
```bash
npm run build
npm link
npm link "../your-project/node_modules/react"
cd ../your-project
npm link react-browser-components
```