Skip to content

Commit 26fb982

Browse files
EnhancedJaxEnhancedJax
authored
Merge pull request #3 from EnhancedJax/main
Update develop
2 parents 0328d71 + 8fb747e commit 26fb982

File tree

5 files changed

+42
-40
lines changed

5 files changed

+42
-40
lines changed

‎.github/workflows/npm-publish.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ jobs:
2121
- name: Install dependencies
2222
run: npm ci
2323

24+
- name: Build package
25+
run: npm run build
26+
2427
- name: Publish to npm
2528
run: npm publish --access public
2629
env:

‎README.md

Lines changed: 38 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
# react-browser-containers
1+
# 🪟 react-browser-containers ✨
22

3-
React Browser "container" components library, with tabs functionality. The library currency provides two browser components: `ChromeBrowser` and `ArcBrowser`.
3+
Customizable browser-like containers, with tabs functionality (React).
4+
5+
```bash
6+
npm i @enhanced-jax/react-browser-containers
7+
```
48

59
![npm](https://img.shields.io/npm/v/@enhanced-jax/react-browser-containers)
610
![GitHub license](https://img.shields.io/github/license/EnhancedJax/react-browser-containers)
711
![npm bundle size](https://img.shields.io/bundlephobia/min/@enhanced-jax/react-browser-containers)
812

9-
| ChromeBrowser | ArcBrowser |
10-
| :----------------------: | :-------------------: |
11-
| ![](./images/chrome.jpg) | ![](./images/arc.jpg) |
13+
| ![](./images/chrome.png) ChromeBrowser | ![](./images/arc.png) ArcBrowser |
14+
| :------------------------------------: | :------------------------------: |
15+
| ![](./images/chrome.jpg) | ![](./images/arc.jpg) |
1216

1317
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.
1418

@@ -20,45 +24,40 @@ import { useState } from "react";
2024

2125
const App = () => {
2226
const [tab, setTab] = useState(0);
23-
24-
return (
25-
<ChromeBrowser
26-
tab={tab}
27-
setTab={setTab}
28-
tabs={{
29-
name: "Tab 1",
30-
link: "/tab1",
31-
content: <div>Tab 1 Content</div>,
32-
}}
33-
></ChromeBrowser>
34-
);
27+
const tabs = [
28+
{
29+
name: "Google",
30+
link: "https://google.com",
31+
content: <div>Content</div>,
32+
icon: (
33+
<img
34+
src="https://google.com/favicon.ico"
35+
style={{ width: "100%", height: "100%" }}
36+
/>
37+
),
38+
},
39+
];
40+
41+
return <ChromeBrowser tab={tab} setTab={setTab} tabs={tabs}></ChromeBrowser>;
3542
};
3643
```
3744

3845
### Props
3946

40-
```js
41-
export type ChromeBrowserProps = {
42-
theme?: "light" | "dark"; // theme of the browser, default is light. The light and dark theme of ArcBrowser is the same.
43-
tabs?: Array<{ // pages in the browser
44-
name: string;
45-
link: string; // decorative link in the URL bar
46-
content: React.ReactNode; // content of the page
47-
icon: React.ReactNode; // icon of the page. use w/h 100%.
48-
// tip: get fav icon from any site using https://www.domain.com/favicon.ico
49-
}>;
50-
shadow?: boolean; // shadow of the browser, default is true
51-
useContentSize?: boolean; // default is false: browser will be the size of it's parent element. true: browser will be the size of it's content
52-
contentScroll?: boolean; // if content inside the container should be scrollable, default is true
53-
leftIcons?: React.ReactNode; // leave empty for default icons
54-
rightIcons?: React.ReactNode; // leave empty for default icons
55-
lightTheme?: Theme; // changes the light theme of the browser
56-
darkTheme?: Theme; // changes the dark theme of the browser
57-
children?: React.ReactNode; // content displayed over all pages
58-
tab?: number;
59-
setTab?: (tab: number) => void;
60-
};
61-
```
47+
| Name | Type | Description |
48+
| -------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
49+
| theme | `"light" \| "dark"` | Theme of the browser, default is light. The light and dark theme of ArcBrowser is the same. |
50+
| tabs | `Array<{name: string;link: string;content: React.ReactNode;icon: React.ReactNode;}>` | Pages in the browser. |
51+
| shadow | `boolean` | Shadow of the browser, default is true. |
52+
| useContentSize | `boolean` | Default is false: browser will be the size of its parent element. True: browser will be the size of its content. |
53+
| contentScroll | `boolean` | If content inside the container should be scrollable, default is true. |
54+
| leftIcons | `React.ReactNode` | Leave empty for default icons. |
55+
| rightIcons | `React.ReactNode` | Leave empty for default icons. |
56+
| lightTheme | `Theme` | Changes the light theme of the browser. |
57+
| darkTheme | `Theme` | Changes the dark theme of the browser. |
58+
| children | `React.ReactNode` | Content displayed over all pages. |
59+
| tab | `number` | Active tab index. |
60+
| setTab | `(tab: number) => void` | Function to set the active tab index. |
6261

6362
```js
6463
export default interface Theme {

‎images/arc.png

761 Bytes
Loading

‎images/chrome.png

899 Bytes
Loading

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@enhanced-jax/react-browser-containers",
3-
"version": "1.0.0",
3+
"version": "1.0.3",
44
"description": "",
55
"scripts": {
66
"format": "prettier --write --parser typescript '**/*.{ts,tsx}'",

0 commit comments

Comments
 (0)