use browser ui components inside your app!

Demo: https://react-browser-ui.netlify.app/

Chrome (showHeader = true) | Chrome (showHeader = false) :-------------------------:|:-------------------------: | Firefox (showHeader = true) | Firefox (showHeader = false) | Safari | |

Install

npm install --save react-browser-ui

Usage

Chrome Example

import React from 'react'
import Browser, { Chrome } from 'react-browser-ui'

const { Tab, Divider, AddButton } = Chrome

export default function ChromeExample ({ showHeader = false }) {
  const tabEnd = (
    <React.Fragment>
      <Divider />
      <AddButton />
    </React.Fragment>
  )
  return (
    <div style={{ width: 600, height: 500 }}>
      <Browser
        type={'chrome'}
        showHeader={showHeader}
        activeTabKey={'green'}
        tabEnd={tabEnd}>
        <Tab key={'green'} imageUrl={''} imageAlt={'green tab image'} title={'Green'}>
          <div style={{ backgroundColor: 'green', height: '100%', width: '100%', opacity: 0.9, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <h1 style={{ color: 'white', margin: 0 }}>{'Your component here'}</h1>
          </div>
        </Tab>
        <Tab key={'blue'} imageAlt={'blue tab image'} title={'Blue'}>
          <div style={{ backgroundColor: 'green', height: '100%', width: '100%', opacity: 0.9, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <h1 style={{ color: 'white', margin: 0 }}>{'Your component here'}</h1>
          </div>
        </Tab>
      </Browser>
    </div>
  )
}

Firefox Example

import React from 'react'
import Browser, { Firefox } from 'react-browser-ui'

const { Tab, Divider, AddButton } = Firefox

export default function FirefoxExample () {
  const tabEnd = (
    <React.Fragment>
      <Divider />
      <AddButton />
    </React.Fragment>
  )
  return (
    <div style={{ width: 600, height: 500 }}>
      <Browser
        type={'firefox'}
        showHeader={false}
        activeTabKey={'green'}
        tabEnd={tabEnd}>
        <Tab key={'green'} imageAlt={'green tab image'} title={'Green'}>
          <div style={{ backgroundColor: 'green', height: '100%', width: '100%', opacity: 0.9, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <h1 style={{ color: 'white', margin: 0 }}>{'Your component here'}</h1>
          </div>
        </Tab>
        <Tab key={'blue'} imageUrl={''} imageAlt={'blue tab image'} title={'Blue'}>
          <div style={{ backgroundColor: 'green', height: '100%', width: '100%', opacity: 0.9, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <h1 style={{ color: 'white', margin: 0 }}>{'Your component here'}</h1>
          </div>
        </Tab>
      </Browser>
    </div>
  )
}

Safari Example

import React from 'react'
import Browser, { Safari } from 'react-browser-ui'

const { Tab, Divider, AddButton } = Safari

export default function SafariExample () {
  const tabEnd = (
    <React.Fragment>
      <Divider />
      <AddButton />
    </React.Fragment>
  )
  return (
    <div style={{ width: 600, height: 500 }}>
      <Browser
        type={'safari'}
        showHeader={false}
        activeTabKey={'green'}
        tabEnd={tabEnd}>
        <Tab key={'green'} imageUrl={''} imageAlt={'green tab image'} title={'Green'}>
          <div style={{ backgroundColor: 'green', height: '100%', width: '100%', opacity: 0.9, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <h1 style={{ color: 'white', margin: 0 }}>{'Your component here'}</h1>
          </div>
        </Tab>
        <Tab key={'blue'} imageUrl={''} imageAlt={'blue tab image'} title={'Blue'}>
          <div style={{ backgroundColor: 'green', height: '100%', width: '100%', opacity: 0.9, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <h1 style={{ color: 'white', margin: 0 }}>{'Your component here'}</h1>
          </div>
        </Tab>
      </Browser>
    </div>
  )
}

API

Browser

| Prop | Type | Default | Description | | --- | --- | --- | --- | | type | String | 'chrome' | browser type (currently chrome, firefox and safari is supported) | | showHeader | Boolean | false | whether to show header of the browser | | activeTabKey | String, Number | undefined | active tab's key | | tabEnd | ReactElements | <React.Fragment /> | additional react elements that will be insterted end of the tabs | | children | ReactElements | <React.Fragment /> | Tab element collection will passed as a child in here | | onChange | Function | undefined | if you want your browser to be controlled by your state use 'onChange' property that sends 'key' of the 'Tab' as first parameter | | onClose | Function | undefined | action will be fired when browser close button clicked | | onMinifyClick | Function | undefined | action will be fired when browser minify button clicked | | onFullscreenClick | Function | undefined | action will be fired when browser fullscreen button clicked |

Tab

| Prop | Type | Default | Description | | --- | --- | --- | --- | | key | String, Number | undefined | tab key is required and will be used when determining active tab | | imageUrl | String | undefined | thumbnail image of the tab | | imageAlt | String | '' | alt attribute of image | | title | String, ReactElements | '' | title of the tab | | children | ReactElements | <React.Fragment /> | tab content, your component will go here | | onClose | Function | undefined | action will be fired when tab close button clicked |

Divider

Vertically divides items.

| Prop | Type | Default | Description | | --- | --- | --- | --- | | - | - | - | - |

AddButton

Circle add button. It can take any native button properties as a prop

| Prop | Type | Default | Description | | --- | --- | --- | --- | | - | - | - | - |

License

MIT © ismailnamdar