Arrows instead of dropdown for scrollable tabs like in v10

[rus-yurchenko]

Hi everyone,

I see that scrollable behavior with arrows has been removed starting v11 of this package. At the same time in the README, the screenshot still exists.

Is it possible to reproduce exactly the same tabs behavior using only arrows like on the demo screenshot?

[Mood-al]

yes i was facing the same issue so i moved to 10v of rc-tabs but the issue with it that in mobile you cant swipe tabs you are forced to use arrows to navigate between tabs so it;s disappointing\ that they removed it in the latest version

[notmedia]

same question

[Mood-al]

same question

You can use this component I built it from scratch you can customize everything inside it. and I'm planing to add dropdown to it too like rc-tabs
https://www.npmjs.com/package/react-tabs-scrollable

[vikasCognext]

@Mood-al could you give any example that how can we use react-tabs-scrollable along with rc-tabs

[Mood-al]

@Mood-al could you give any example that how can we use react-tabs-scrollable along with rc-tabs

Hmmmm i really forgot to add one but it's just a dropdown and you can put it next to the tabs container ising css and by using the onchange in select input you can change the state of the active tabs

But anyway I'm not free now maybe after a week i will add this example

[vikasCognext]

@Mood-al i have added that scroll to rc-tabs

export default function ReactScrollTabs(props) {
    const [activeTab, setActiveTab] = useState(0)
    console.log(props)
    let propData = JSON.parse(JSON.stringify(props.data))
    const onTabClick = (e, index) => {
        console.log(e)
        props.currentTab(index)
        setActiveTab(index)
      }
  return (
    
    <Tabs activeTab={activeTab} onTabClick={onTabClick} >
      {/* generating an array to loop through it  */}
      {propData.map((item,ind) => (
        <Tab key={ind}>{item.title}</Tab>
      ))}
    </Tabs>
    
  )
}

<Tabs  activeKey={activeTab} renderTabBar={() => <ReactScrollTabs data={payload} currentTab={ScrollTabs} />} ></Tabs>

using above code you can add scrollbar to existing code.

[Mood-al]

@Mood-al i have added that scroll to rc-tabs

export default function ReactScrollTabs(props) {
    const [activeTab, setActiveTab] = useState(0)
    console.log(props)
    let propData = JSON.parse(JSON.stringify(props.data))
    const onTabClick = (e, index) => {
        console.log(e)
        props.currentTab(index)
        setActiveTab(index)
      }
  return (
    
    <Tabs activeTab={activeTab} onTabClick={onTabClick} >
      {/* generating an array to loop through it  */}
      {propData.map((item,ind) => (
        <Tab key={ind}>{item.title}</Tab>
      ))}
    </Tabs>
    
  )
}

<Tabs  activeKey={activeTab} renderTabBar={() => <ReactScrollTabs data={payload} currentTab={ScrollTabs} />} ></Tabs>

using above code you can add scrollbar to existing code.

Hold on i really didnt get what do you want

Do you want to show scroll bar? Or you want react-tabs-scrollable to look like rc-tabs??

[vikasCognext]

@Mood-al i have added that scroll to rc-tabs

export default function ReactScrollTabs(props) {
    const [activeTab, setActiveTab] = useState(0)
    console.log(props)
    let propData = JSON.parse(JSON.stringify(props.data))
    const onTabClick = (e, index) => {
        console.log(e)
        props.currentTab(index)
        setActiveTab(index)
      }
  return (
    
    <Tabs activeTab={activeTab} onTabClick={onTabClick} >
      {/* generating an array to loop through it  */}
      {propData.map((item,ind) => (
        <Tab key={ind}>{item.title}</Tab>
      ))}
    </Tabs>
    
  )
}

<Tabs  activeKey={activeTab} renderTabBar={() => <ReactScrollTabs data={payload} currentTab={ScrollTabs} />} ></Tabs>

using above code you can add scrollbar to existing code.

Hold on i really didnt get what do you want

Do you want to show scroll bar? Or you want react-tabs-scrollable to look like rc-tabs??

i have added react-tabs-scrollable into rc-tab so i utilize both as i need not to change my current code just added scrollbar using react-tabs-scrollable into renderTabBar props and just pass the active key to rc-tabs

[Mood-al]

@Mood-al i have added that scroll to rc-tabs

export default function ReactScrollTabs(props) {
    const [activeTab, setActiveTab] = useState(0)
    console.log(props)
    let propData = JSON.parse(JSON.stringify(props.data))
    const onTabClick = (e, index) => {
        console.log(e)
        props.currentTab(index)
        setActiveTab(index)
      }
  return (
    
    <Tabs activeTab={activeTab} onTabClick={onTabClick} >
      {/* generating an array to loop through it  */}
      {propData.map((item,ind) => (
        <Tab key={ind}>{item.title}</Tab>
      ))}
    </Tabs>
    
  )
}

<Tabs  activeKey={activeTab} renderTabBar={() => <ReactScrollTabs data={payload} currentTab={ScrollTabs} />} ></Tabs>

using above code you can add scrollbar to existing code.

Hold on i really didnt get what do you want

Do you want to show scroll bar? Or you want react-tabs-scrollable to look like rc-tabs??

i have added react-tabs-scrollable into rc-tab so i utilize both as i need not to change my current code just added scrollbar using react-tabs-scrollable into renderTabBar props and just pass the active key to rc-tabs

I see now but you can totally get rid of rc-tabs and customize react-tabs-scrollable to look as you want usinf just css and a select input .
soon enough i will provide an example of that use case

[Mood-al]

@Mood-al could you give any example that how can we use react-tabs-scrollable along with rc-tabs

hey I created an example to how you can customize react-tabs-scrollable to look like rc-tabs .
u can check it out from here
https://codesandbox.io/s/react-tabs-scrollable-rc-tabs-like-example-lrbt2j