Stack Overflow
Stack Overflow

Questions tagged [react-tabs]

An accessible tab component for React.js.

A tab component for React.js.

Learn more:

62 questions
0
votes
1 answer

I am using react-bootstrap/Tabs for dynamic Tabs with content. If Tabs are more than 6, i want horizontal scroll to be added

import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; import Sonnet from '../../components/Sonnet'; function UncontrolledExample() { return (
Seema
  • 1
  • 1
0
votes
2 answers

How to make React Tabs component as reusable component?

import { useState } from "react"; export default function TabsComponent() { const tabs = [ { name: "Home", link: "#", content: "Home Content" }, { name: "About", link: "#", content: "About Content" }, { name: "Contact",…
bv-dev
  • 3
  • 2
0
votes
0 answers

React component tabs and URLs

I'm fairly new to React so please bare with me. We have a list of elements which all load their own content based on a query string parameter (let's call it CustomerID) passed in to the page. When clicking on the tabs, the URL remains the same.…
Sami.C
  • 561
  • 1
  • 11
  • 24
0
votes
1 answer

Navigate between tabs on click of button react-tabs

Hi everyone i am new in react and javascript. on click of the button want to move to next tab and last tab should be submit. dependency used is "https://www.npmjs.com/package/react-tabs". Any help could be appreciated. Please take a look on the code…
Mohammed Yousuff
  • 122
  • 1
  • 1
  • 9
0
votes
0 answers

Load dynamic tabs based on search results in React

I need to build a small application where I have a search page, multiple/single item can be searched On submit it should load dynamic tabs( in tabs view) based on number of searched items. Tabs can be closed I am trying to use Ant Design in React…
user1057641
  • 559
  • 4
  • 8
0
votes
2 answers

Need loop to simplify a component

I am building a Tabs component in React JS. I want to create a loop for my code, instead of hardcoding every tab(title, content). The code is working I need to simplify the code with a loop. Tabs Component import { useState } from "react" import…
NoName84
  • 407
  • 3
  • 12
  • 25
0
votes
1 answer

How to create a customized clickable and scrollable top tab navigation in react native?

I am using react navigation v6. What I want is a clickable and scrollable tabs in top tab navigator? In 3rd party Modules, there are many issues so that's why currently I am not using that.
vesh
  • 19
  • 4
0
votes
1 answer

React-Tabs: Issues when implementing the same Tabs for different TabPanels

I want to implement an idea using react-tabs where I change the content displayed in the TabPanels depending on a particular state. I have tried to implement this by having a parent component (AppTabs) that depending on the value of the state (let's…
elita185
  • 11
  • 3
0
votes
1 answer

React-Native Bottom Tab Navigator Not Applying Stylesheet

Hi I am having issues with the styling not appearing on the bottom tab navigator. For some reason when I got to apply the styling from a stylesheet I have created it won't apply itself to the tab. The styling that is within the tab itself works,…
Tristan
  • 1
  • 1
  • 2
0
votes
1 answer

"react-tabs" is there any way to get the text of the active tab (or set a name/indicator for tabs and get that?)

I am using the react-tab package. I have defined my page like Gen Problem Solving {/* (problem_s) */} Spec Balances Problem {/* (spec_strat_balan_s) */} Gen…
Joseph
  • 541
  • 1
  • 4
  • 31
0
votes
0 answers

Custom react badge style

How can I make a badge/notification inside the tab bootstrap like this? (I use tabs from bootstrap library). setKey(k)} className="app_header" >
Hoangdz
  • 152
  • 1
  • 14
0
votes
0 answers

React Tabs - unable to move to next and previous tab programatically using buttons

I have a div in which i have 3 tabs and 2 buttons "Back" and "Next". What I want to acheive is that on click of "Next" button I should move to the next tab and on click of "Back" button I should move to the previous tab. I have used the below code…
tanu
  • 13
  • 4
0
votes
1 answer

React native Tab background Change

I'm using the simple react native tab. The tab works fine but it shows the default blue color background of the tag. That means About Courses and Chat are in a row and getting blue color by default. How could I change it?Also, how could I change ' …
megh
  • 171
  • 1
  • 1
  • 10
0
votes
1 answer

Fetch and render API data inside Tab react js

I planned to create a page with four tabs. Each tab will contain their own data. I've surfed for more than three hours how to consume API data inside Tabs. All I can see is how to create a tabs by using material UI, BootStrap, React Tabs. I am…
Still_Learning
  • 209
  • 3
  • 14
0
votes
1 answer

How to import npm module css as global with webpack and typescript?

I am using react-tabs it comes bundled with a .css file. It suggests importing the css file like: import 'react-tabs/style/react-tabs.css'; I'm following the basic example and have the Tab components rendered like: …
kevzettler
  • 4,783
  • 15
  • 58
  • 103
1 2
3
4 5