Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@cellosignal/react-tabs
Advanced tools
Declaritive, accessible tabs in React that collapse into accordions on mobile.
This component uses the Context API, therefore there is a minimum requirement of React 16.3.
npm i @cellosignal/react-tabs
const AwesomeTabs = () => {
return (
<Tabs>
<Tab title="Tab One">
<h1>Ain't this tidy?</h1>
<p>I'm more text</p>
</Tab>
<Tab title="Tab Two">
<SomeOtherComponent />
</Tab>
<Tabs>
);
}
There are a number of options available for targeting styles and providing data to the components.
Prop | Component | Description |
---|---|---|
className | <Tabs> | Add your classNames for styling, this adds it at the top level |
contentClassName | <Tabs> | className for wrapping your content |
className | <Tab> | className to add to each tab |
activeClassName | <Tab> | className added to the active tab |
title | <Tab> | String, the title of the Tab |
toggleClassName | <Tabs> | className added to the button, only on mobile |
mobileBreakpoint | <Tabs> | Mobile breakpoint in px |
tabListClassName | <Tabs> | className added to the tab list |
We use storybook for component development, to get up and running follow these steps:
cd
into the root and run npm install
npm run dev
, this will start webpackcd
into the project and run npm run storybook
npm link
this package, to do this you need to:
cd
into this project and run npm link
cd
into your application and run npm link @cellosignal/react-tabs
Please see the contrubting guidlines.
FAQs
Acessible react tabs that collapse into an accordion on mobile
We found that @cellosignal/react-tabs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.