reactintermediatemit
React Tabs
A keyboard-friendly tabs component.
9.6k2.0k1.4k566
About this module
An accessible tabs component with arrow-key navigation, ARIA roles and an animated indicator.
#react#tabs#keyboard#accessible
Source code
Installation
- 1
Install dependencies
Install React and the required packages.
npm install react react-dom - 2
Create the component
Create ReactTabs.tsx and paste the source below.
- 3
Create the styles
Create `styles.css` alongside the component and import it from the component file.
- 4
Import and use
Import the component in your page or layout and render it.
Usage
- 1
Import the component
Import ReactTabs from its file.
import ReactTabs from "./components/ReactTabs"; - 2
Render it
Render the component in your JSX.
export default function App() { return <ReactTabs />; }