https://github.com/raja0sama/browser-tabs

Browser like React-based tabs for electron App.
https://github.com/raja0sama/browser-tabs

electron javascript reactjs reactnative

Last synced: 4 months ago
JSON representation

Browser like React-based tabs for electron App.

• Host: GitHub
• URL: https://github.com/raja0sama/browser-tabs
• Owner: Raja0sama
• Created: 2021-01-25T05:25:56.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-02-15T07:23:48.000Z (over 5 years ago)
• Last Synced: 2025-08-09T14:20:11.805Z (11 months ago)
• Topics: electron, javascript, reactjs, reactnative
• Language: JavaScript
• Homepage: https://react-browser-tabs.vercel.app/
• Size: 231 KB
• Stars: 20
• Watchers: 1
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-browser-tabs 🖥

> Browser like tabs for you custom browser, you can use this in Electron App. 🎉

![react-browser-tab](https://i.imgur.com/ZiK6XbQ.png)

[DEMO](https://react-browser-tabs.vercel.app/)

### when to use this ?

If one day you wake up 🌄 and decided to create your own browser 💻 with some javascript frameworks 🦾, this library will come in handy 🤟.

[![NPM](https://img.shields.io/npm/v/browser-tabs.svg)](https://www.npmjs.com/package/browser-tabs) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save react-browser-tabs

```

## Usage

```jsx

import React, { useState } from 'react'

import MyComponent from 'react-browser-tabs'

const Example = () => {

  const defaultTabs = [

    {

      title: 'getting started',

      url: 'https://google.com/', // auto fetch url

      id: 'tab1',

      content: (props) => Hello World

    }

  ]

  const tabs = useState(defaultTabs)

  const activeTab = useState(0)

  return (

    

  )

}

```

## Add Tabs

```jsx

const addTab = () => {

  activeTab[1](tabs[0].length)

  tabs[1]([

    ...tabs[0],

    {

      title: 'New Tab ',

      url: 'https://rajaosama.me/',

      id: 'tab1',

      content: (props) => (

        

          New Tab Opened

        

      )

    }

  ])

}

```

it automatically get the favicon for your desire app, just pass the url as it is.

## License

MIT © [rajaosama](https://github.com/rajaosama)