react-browser-ui
v1.3.5
use browser ui components inside your app!
0/weekUpdated 3 years agoMITUnpacked: 159.7 KB
Published by ismailnamdar
npm install react-browser-ui
react-browser-ui
> use browser ui components inside your app!
 
$3
Chrome (showHeader = true) | Chrome (showHeader = false)
:-------------------------:|:-------------------------:
!Browser ui example 1 | !Browser ui example 2
Firefox (showHeader = true) | Firefox (showHeader = false)
!Browser firefox ui example 1 | !Browser firefox ui example 2
Safari |
!Browser safari ui example 1 |
Install
``bash`
npm install --save react-browser-ui
Usage
$3
`
jsx
import React from 'react'
import Browser, { Chrome } from 'react-browser-ui'const { Tab, Divider, AddButton } = Chrome
export default function ChromeExample ({ showHeader = false }) {
const tabEnd = (
)
return (
showHeader={showHeader}
activeTabKey={'green'}
tabEnd={tabEnd}>
{'Your component here'}
{'Your component here'}
)
}
`$3
jsx
import React from 'react'
import Browser, { Firefox } from 'react-browser-ui'const { Tab, Divider, AddButton } = Firefox
export default function FirefoxExample () {
const tabEnd = (
)
return (
showHeader={false}
activeTabKey={'green'}
tabEnd={tabEnd}>
{'Your component here'}
{'Your component here'}
)
}
`$3
jsx
import React from 'react'
import Browser, { Safari } from 'react-browser-ui'const { Tab, Divider, AddButton } = Safari
export default function SafariExample () {
const tabEnd = (
)
return (
showHeader={false}
activeTabKey={'green'}
tabEnd={tabEnd}>
{'Your component here'}
{'Your component here'}
)
}
`
API
$3
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| type | String | 'chrome' | browser type (currently chrome, firefox and safari is supported) |
| showHeader | Boolean | | whether to show header of the browser |
| activeTabKey | String, Number | undefined | active tab's key |
| tabEnd | ReactElements | | additional react elements that will be insterted end of the tabs |
| children | ReactElements | | 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 |$3
| 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 | | tab content, your component will go here |
| onClose | Function | undefined` | action will be fired when tab close button clicked |$3
Vertically divides items.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| - | - | - | - |
$3
Circle add button. It can take any native button properties as a prop
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| - | - | - | - |
License
MIT © ismailnamdar