@karrotframe/tabs

Swipable Tab UI for React

---

- Setup
- Components
- Tabs
- Hooks
- useTabsController

---

Setup

``bash
$ yarn add @karrotframe/tabs
`

Should import the CSS of your app

`typescript
import '@karrotframe/tabs/index.css'

import { ... } from '@karrotframe/tabs'
`

Components

$3

> All the props is typed and commented in TypeScript

`tsx
import { Tabs } from '@karrotframe/tabs'
import { useState } from 'react'

const App: React.FC = () => {
const [activeTabKey, setActiveTabKey] = useState('tab_1')

return (
activeTabKey={activeTabKey}
tabs={[
{
key: 'tab_1',
buttonLabel: 'Tab 1',
render: () =>

export default App
`

Hooks

$3

`tsx
import { useTabsController } from '@karrotframe/tabs'

const Something: React.FC = () => {
const { enableSwipe, disableSwipe } = useTabsController()

const onTouchDown = () => {
// disable swipe when other action needed
disableSwipe()

// ...
}

return (
// ...
)
}
``