georgeOsdDev/ react-draggable-tab

JavaScript

React

CSS

HTML

View on GitHub

Need help with react-draggable-tab?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

georgeOsdDev

136 Stars

31 Forks

MIT License

219 Commits

15 Opened issues

Description

Atom like draggable tab react component

Services available

Need anything else?

Contributors list

Takeharu.Oshida georgeOsdDev

# 128,017

Shell

React

HTML

Markdow...

23 commits

Eran Gil eran-gil

# 706,047

React

HTML

CSS

3 commits

Uri Klar urikphytech

# 192,139

React

TypeScr...

google-...

2 commits

Manuel Dell'Elce Maluen

# 131,239

HTML

Backbon...

debugge...

React

2 commits

Shane Donnelly shanejdonnelly

# 731,503

React

HTML

CSS

1 commit

Henrik Wenz HaNdTriX

# 1,392

React

TypeScr...

node

nextjs

1 commit

EhsanKhaki ehsankhfr

# 13,650

watch-f...

JavaScr...

React

Shell

1 commit

Michael South mgsouth

# 760,444

React

HTML

CSS

1 commit

linhlc888 linhlc888

# 713,129

CSS

React

HTML

1 commit

Readme

React-draggable-tab

Name: react-draggable-tab
Brand: react-draggable-tab
SKU: //georgeOsdDev/react-draggable-tab
Rating: 2.09 (136 reviews)

Atom like draggable tab react component.

Demo

View Demo

Installation

npm install --save react-draggable-tab

React v0.14 is supported from react-draggable-tab v0.4.0. For React v0.13.x, please use react-draggable-tab v0.3.3.

API

Tab

Tab

is just a case class to check props.

props.children

will rendered into content area.

Props

```
key
```
: unique key in
```
TabList
```
.
```
PropTypes.string.isRequired
```
```
beforeTitle
```
: element to show in tab. eg icon.
```
PropTypes.element
```

title

: string or element to show in tab.

PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired

```
afterTitle
```
: element to show in tab. eg: notification badge
```
PropTypes.element
```
```
uncloseable
```
: If
```
true
```
, closeButton will not be appeared in tab.
```
PropTypes.bool
```
(Default
```
false
```
)

Style (for each tab)

```
tabClassNames
```
: classNames which will be added to rendered elements.
- ```
tab
```
  : base
```
li
```
  element of tab (defult:
```
rdTab
```
  )
- ```
tabBefore
```
  : before element of
```
li
```
  which emulate
```
:Before
```
  selector (defult:
```
rdTabBefore
```
  )
- ```
tabAfter
```
  : after element of
```
li
```
  which emulate
```
:After
```
  selector (defult:
```
rdTabAfter
```
  )
- ```
tabTitle
```
  :
```
span
```
  element of tab title (defult:
```
rdTabTitle
```
  )
- ```
tabBeforeTitle
```
  :
```
span
```
  element of tab before title (defult:
```
tabBeforeTitle
```
  )
- ```
tabAfterTitle
```
  :
```
span
```
  element of tab after title (defult:
```
tabAfterTitle
```
  )
- ```
tabCloseIcon
```
  : base
```
span
```
  element of close icon (defult:
```
rdCloseIcon
```
  )
- ```
tabActive
```
  : selected tab's
```
li
```
  , before, after (defult:
```
rdTabActive
```
  )
- ```
tabHover
```
  : selected tab's
```
li
```
  , before, after (defult:
```
rdTabHover
```
  )
```
tabStyles
```
: Inline styles which will be overwritten default and common-tabs inline styles.
- ```
tab
```
  : base
```
li
```
  element of tab
- ```
tabBefore
```
  : before element of
```
li
```
  which emulate
```
:Before
```
  selector.
- ```
tabAfter
```
  : after element of
```
li
```
  which emulate
```
:After
```
  selector.
- ```
tabTitle
```
  :
```
span
```
  element of tab title
- ```
tabActive
```
  : selected tab's
```
li
```
- ```
tabBeforeActive
```
  : selected tab's
```
li
```
  before
- ```
tabAfterActive
```
  : selected tab's
```
li
```
  after
- ```
tabTitleActive
```
  : selected tab's title
- ```
tabOnHover
```
  : hovered tab's
```
li
```
- ```
tabBeforeOnHover
```
  : hovered tab's
```
li
```
  before
- ```
tabAfterOnHover
```
  : hovered tab's
```
li
```
  after
- ```
tabTitleOnHover
```
  : hovered tab's title
- ```
tabCloseIcon
```
  : base
```
span
```
  element of close icon
- ```
tabCloseIconOnHover
```
  : base
```
span
```
  element of close icon when hover
```
containerStyle
```
: style object which will be apply to container of rendered tab.
```
hiddenContainerStyle
```
: style object which will be apply to container of hidden tab.

Events

All other props like

onXX

handler set to

Tab

will be passed to rendered element except

onClick

You can use any

onXX

for Supported events for tab element.

Tabs

Tabs

is container for tab. it will render tabBar and content of selected element.

Props

tabs

: Array of

Tab

elements.

PropTypes.arrayOf(PropTypes.element)

```
selectedTab
```
: key for selectedTab.
```
PropTypes.string
```
default to first tab.
```
disableDrag
```
: disables the ability to drag the tabs.
```
React.PropTypes.bool
```
default is false.
```
tabAddButton
```
: element for add button.
```
PropTypes.element
```
```
keepSelectedTab
```
: Prevent tab select on drag/move behind tab.
```
PropTypes.bool
```
default
```
false
```
.
```
unclosable
```
: Disable tab to close.
```
PropTypes.bool
```
default
```
false
```
.
```
shouldTabClose(e, key)
```
: will be called before tab close event, return false if you want to stop tab close process, default
```
true
```
;

Shortcut key binding

```
shortCutKeys
```
: Short cut key bindings as Mousetrap style.
- ```
close
```
  : key binding to close current tab (
```
onTabClose
```
  will be called)
- ```
create
```
  : key binding to create tab (
```
onTabAddButtonClick
```
  will be called)
- ```
moveRight
```
  : key binding to move right (
```
onTabSelect
```
  will be called)
- ```
moveLeft
```
  : key binding to move left (
```
onTabSelect
```
  will be called)

Style (All tabs will be apply these styles)

```
tabsClassNames
```
: classNames which will be added to rendered elements.
- ```
tabWrapper
```
  : root wrapper
```
div
```
  element (defult:
```
rdTabWrapper
```
  )
- ```
tabBar
```
  : base
```
ul
```
  element of tab bar (defult:
```
rdTabBar
```
  )
- ```
tabBarAfter
```
  : after
```
span
```
  element of tab bar which emulate
```
:After
```
  selector (defult:
```
rdTabBarAfter
```
  )
- ```
tab
```
  : base
```
li
```
  element of tab (defult:
```
rdTab
```
  )
- ```
tabBefore
```
  : before element of
```
li
```
  which emulate
```
:Before
```
  selector (defult:
```
rdTabBefore
```
  )
- ```
tabAfter
```
  : after element of
```
li
```
  which emulate
```
:After
```
  selector (defult:
```
rdTabAfter
```
  )
- ```
tabTitle
```
  :
```
span
```
  element of tab title (defult:
```
rdTabTitle
```
  )
- ```
tabBeforeTitle
```
  :
```
span
```
  element of tab before title (defult:
```
rdTabBeforeTitle
```
  )
- ```
tabBeforeTitle
```
  :
```
span
```
  element of tab after title (defult:
```
rdTabAfterTitle
```
  )
- ```
tabCloseIcon
```
  : base
```
span
```
  element of close icon (defult:
```
rdCloseIcon
```
  )
- ```
tabActive
```
  : selected tab's
```
li
```
  , before, after (defult:
```
rdTabActive
```
  )
```
tabsStyles
```
: Inline styles which will be overwritten default inline styles.
- ```
tabWrapper
```
  : root wrapper
```
div
```
  element
- ```
tabBar
```
  : base
```
ul
```
  element of tab bar
- ```
tabBarAfter
```
  : after
```
span
```
  element of tab bar which emulate
```
:After
```
  selector
- ```
tab
```
  : base
```
li
```
  element of tab
- ```
tabBefore
```
  : before element of
```
li
```
  which emulate
```
:Before
```
  selector.
- ```
tabAfter
```
  : after element of
```
li
```
  which emulate
```
:After
```
  selector.
- ```
tabTitle
```
  :
```
span
```
  element of tab title
- ```
tabActive
```
  : selected tab's
```
li
```
- ```
tabBeforeActive
```
  : selected tab's
```
li
```
  before
- ```
tabAfterActive
```
  : selected tab's
```
li
```
  after
- ```
tabTitleActive
```
  : selected tab's title
- ```
tabCloseIcon
```
  : base
```
span
```
  element of close icon
- ```
tabCloseIconOnHover
```
  : base
```
span
```
  element of close icon when hover

Events

```
onTabSelect(e, key, currentTabs)
```
: Called when tab of key was selected.
```
currentTabs
```
is array of tabs elements sorted with current order.
```
onTabClose(e, key, currentTabs)
```
: Called when tab of key was closed.
```
currentTabs
```
is array of tabs elements sorted with current order.
```
onTabPositionChange(e, key, currentTabs)
```
: Called when tab of key was moved.
```
currentTabs
```
is array of tabs elements sorted with current order.
```
onTabAddButtonClick(e, currentTabs)
```
: Called when
```
tab add button
```
was clicked.
```
currentTabs
```
is array of tabs elements sorted with current order. Basically you will concat
```
currentTabs
```
with new empty tab.
```
let newTabs = currentTabs.concat([newTab]);
```

~~*

onTabDoubleClick(e, key)

: Called when

title

was double clicked.~~ Removed from v0.5.0

~~*

onTabMouseEnter(e, key)

: Called when mouse enter to

tab

.~~ Removed from v0.5.0

~~*

onTabMouseLeave(e, key)

: Called when mouse leave from

tab

.~~ Removed from v0.5.0

Usage example

class App extends React.Component {
  constructor(props) {
    super(props);
    let icon = ();
    let fonticon = ();
    let badge = ();

this.state = {
  tabs:[
    (<tab key="{'tab0'}" title="{'unclosable" tab unclosable="{true}">
      <div>
        <h1>This tab cannot close</h1>
      </div>
    </tab>),
    (<tab key="{'tab1'}" title="{'1stTab'}" beforetitle="{icon}">
      <div>
        <h1>This is tab1</h1>
      </div>
    </tab>),
    (<tab key="{'tab2'}" title="{'2ndTab" too long toooooooooooooooooo beforetitle="{fonticon}">
      <div>
        <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        </pre>
      </div>
    </tab>),
    (<tab key="{'tab3'}" title="{'Dynamic" tab aftertitle="{badge}">
      <dynamictabcontent></dynamictabcontent>
    </tab>)
  ],
  badgeCount: 0
};
  }
  handleTabSelect(e, key, currentTabs) {
    console.log('handleTabSelect key:', key);
    this.setState({selectedTab: key, tabs: currentTabs});
  }
  handleTabClose(e, key, currentTabs) {
    console.log('tabClosed key:', key);
    this.setState({tabs: currentTabs});
  }
  handleTabPositionChange(e, key, currentTabs) {
    console.log('tabPositionChanged key:', key);
    this.setState({tabs: currentTabs});
  }
  handleTabAddButtonClick(e, currentTabs) {
    // key must be unique
    const key = 'newTab_' + Date.now();
    let newTab = (
                    

                      New Empty Tab
                    
                  );
    let newTabs = currentTabs.concat([newTab]);
this.setState({
  tabs: newTabs,
  selectedTab: key
});
  }
  render() {
return (
  <tabs tabsclassnames="{tabsClassNames}" tabsstyles="{tabsStyles}" selectedtab="{this.state.selectedTab" this.state.selectedtab : ontabselect="{this.handleTabSelect.bind(this)}" ontabclose="{this.handleTabClose.bind(this)}" ontabaddbuttonclick="{this.handleTabAddButtonClick.bind(this)}" ontabpositionchange="{this.handleTabPositionChange.bind(this)}" tabs="{this.state.tabs}" shortcutkeys="{"></tabs>
)
  }
};

Tests

npm test

Contributors

See list

Known Issue

Dynamic tab content.

Tabs

do not care any change in

Tab

content. content needs update by your application side. See

3rdTab

in example.

```
flex
```
style should be define in CSS for safari. See https://github.com/facebook/react/issues/2020

In application, class

rdTabBar

or your custom class of

TabBar

needs

display: -webkit-flex

in CSS like below. ```css .myTabBar { display: -webkit-flex; }