0.4.3-alpha.5 • Published 10 months ago
@karrotframe/tabs v0.4.3-alpha.5
Swipable Tab UI for React
Setup
$ yarn add @karrotframe/tabs
Should import the CSS of your app
import '@karrotframe/tabs/index.css'
import { ... } from '@karrotframe/tabs'
Components
Tabs
All the props is typed and commented in TypeScript
import { Tabs } from '@karrotframe/tabs'
import { useState } from 'react'
const App: React.FC = () => {
const [activeTabKey, setActiveTabKey] = useState<string>('tab_1')
return (
<Tabs
activeTabKey={activeTabKey}
tabs={[
{
key: 'tab_1',
buttonLabel: 'Tab 1',
render: () => <div>Tab 1</div>,
},
]}
onTabChange={(key) => {
setActiveTabKey(key)
}}
/>
)
}
export default App
Hooks
useTabsController
import { useTabsController } from '@karrotframe/tabs'
const Something: React.FC = () => {
const { enableSwipe, disableSwipe } = useTabsController()
const onTouchDown = () => {
// disable swipe when other action needed
disableSwipe()
// ...
}
return (
// ...
)
}
0.4.3-alpha.4
10 months ago
0.4.3-alpha.5
10 months ago
0.4.3-alpha.3
10 months ago
0.4.3
2 years ago
0.4.3-alpha.0
2 years ago
0.4.3-alpha.1
2 years ago
0.4.3-alpha.2
2 years ago
0.3.9
2 years ago
0.3.6
2 years ago
0.3.5
3 years ago
0.3.8
2 years ago
0.3.7
2 years ago
0.4.1
2 years ago
0.4.0
2 years ago
0.3.4
3 years ago
0.4.2
2 years ago
0.3.0
3 years ago
0.3.2
3 years ago
0.3.1
3 years ago
0.3.3
3 years ago
0.2.0
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago