New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@hashicorp/react-tabs

Package Overview
Dependencies
Maintainers
0
Versions
77
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hashicorp/react-tabs

Display content in a tabbed interface

  • 8.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

Tabs

Tabs will render arbitrary tabbed content based on Tab items passed as children.

Example Usage

<Tabs>
  <Tab heading="First Tab">
    <p>First tab content</p>
  </Tab>
  <Tab heading="Second Tab">
    <p>Second tab content</p>
  </Tab>
  <Tab heading="Third Tab">
    <p>Third tab content</p>
  </Tab>
</Tabs>

Component Props

Tabs

NameTypeDescriptionRequired
childrenReact.ReactNodeTab components to render.true
defaultTabIdxnumberIf set, the tab with the specified ID will be active by default. If not set or if the ID does not match, it will default to 0false
centeredbooleanIf true, the tabs are centered in their container, rather than left-alignedfalse
fullWidthBorderbooleanIf true, the border line underneath the tabs expands to the full width of the container, rather than being slightly padded from the edgesfalse

Tab

NameTypeDescriptionRequired
headingstringTitle of the tabtrue
groupstringA unique identifier for a tab 'group' that, when active, all Tabs with this id will become active when one is selected. Note it's necessary to wrap the page with TabProvider for this feature to function.false
childrenReact.ReactNodeContent that should render when the associated tab is active.false

FAQs

Package last updated on 05 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc