# @bhyoon1110/react-chrome-tabs

> Chrome-style tabs in HTML/CSS/JS

Latest version **1.1.1** (published 2021-09-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bhyoon1110/react-chrome-tabs
pnpm add @bhyoon1110/react-chrome-tabs
yarn add @bhyoon1110/react-chrome-tabs
bun add @bhyoon1110/react-chrome-tabs
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-09-25 |
| First published | 2021-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 50.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | bhyoon1110 |
| Maintainers | bhyoon1110 |
| Keywords | chrome, tabs, html |

## Links

- npm: https://www.npmjs.com/package/@bhyoon1110/react-chrome-tabs
- Repository: https://github.com/my-portfolios/chrome-tabs
- Issues: https://github.com/my-portfolios/chrome-tabs/issues
- npm.io page: https://npm.io/package/@bhyoon1110/react-chrome-tabs

## Dependencies (3)

- [typescript](https://npm.io/package/typescript.md) ^4.2.4
- [draggabilly](https://npm.io/package/draggabilly.md) 2.2.0
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2021-09-25
- 1.1.0 — 2021-09-23
- 1.0.5 — 2021-09-11
- 1.0.4 — 2021-09-11
- 1.0.3 — 2021-09-11
- 1.0.2 — 2021-09-11
- 1.0.1 — 2021-09-11
- 1.0.0 — 2021-09-11
- 0.0.9 — 2021-09-11
- 0.0.8 — 2021-09-11
- 0.0.7 — 2021-09-11
- 0.0.6 — 2021-09-11
- 0.0.5 — 2021-09-11
- 0.0.3 — 2021-09-10
- 0.0.2 — 2021-09-10
- … 1 more at https://npm.io/package/@bhyoon1110/react-chrome-tabs/versions

## README

# React Chrome Tabs

## Install

```shell
npm i @bhyoon1110/react-chrome-tabs
```

## Usage

1. use hooks
   
```js
function Tab() {
  const [tabs, setTabs] = useState([]);
  const { ChromeTabs, ChromeTabsPages, addTab, updateTab, activeTab ,removeTab } = useChromeTabs({
    onTabActivated: (tabId) => {
      activeTab(tabId);
    },
    onTabReorder: (tabId, fromIndex, toIndex) => {},
    onTabClosed: (tabId) => {
        removeTab(tabId);
    },
  });
  const ChromeTabsPagesStyle = {
    height: '30vw'
  };
  return (
    <div>
      <ChromeTabs />
      <ChromeTabsPages style={ChromeTabsPagesStyle} />
      <button
        onClick={() =>
          addTab({ id: `id-${Date.now()}`, title: `새탭`, favicon: false, url:'a.html' })
        }
      >
        탭추가
      </button>
    </div>
  );
}
export default Tab;
```

2. use component

```js
import { Tabs } from '@bhyoon1110/react-chrome-tabs';
<Tabs tabs={tabs} onTabActivated={}>
```

3. make .storybook folder on root and add two files below

.storybook/main.js
```js
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}
```

.storybook/preview.js
```js
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}
```

4. make stoies folder and add two files below

stories/Test.tsx
```js
import { useState } from 'react';
import { useChromeTabs } from "@bhyoon1110/react-chrome-tabs";
import '@bhyoon1110/react-chrome-tabs/css/chrome-tabs.css';

function Tab() {
  const [tabs, setTabs] = useState([]);
  const { ChromeTabs, ChromeTabsPages, addTab, updateTab, activeTab ,removeTab } = useChromeTabs({
    onTabActivated: (tabId) => {
      activeTab(tabId);
    },
    onTabReorder: (tabId, fromIndex, toIndex) => {},
    onTabClosed: (tabId) => {
        removeTab(tabId);
    },
  });
  const ChromeTabsPagesStyle = {
    height: '50vw'
  };
  return (
    <div>
      <ChromeTabs />
      <ChromeTabsPages style={ChromeTabsPagesStyle} />
      <button
        onClick={() =>
          addTab({ id: `id-${Date.now()}`, title: `새탭`, favicon: false, url:'a.html' })
        }
      >
        탭추가
      </button>
    </div>
  );
}
export default Tab;
```

stories/Test.stories.tsx
```js
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import Tab from './Test';

export default {
    title: 'Example/Tab',
    component: Tab,
} as ComponentMeta<typeof Tab>;
  
const Template: ComponentStory<typeof Tab> = (args) => <Tab />;
  
export const Basic = Template.bind({});
Basic.args = {
    
};
```

5. make public folder and add a.html file

public/a.html
```html
this is a.html file
```

6. modify package.json

add content
```json
"devDependencies": {
    "@babel/core": "^7.14.3",
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/react": "^6.2.9",
    "@types/draggabilly": "^2.1.2",
    "@types/lodash.isequal": "^4.5.5",
    "@types/react": "^17.0.8",
    "babel-loader": "^8.2.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }

  "scripts": {
    "storybook": "start-storybook -s ./public -p 6006",
    "build-storybook": "build-storybook"
  }
  ```

7. yarn

8. yarn storybook

---
_Source: https://npm.io/package/@bhyoon1110/react-chrome-tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._