This package was developed based on the Material UI Tabs component. See example.
yarn add mui-tabs@^2
See here for v3 installation and documentation.
import * as React from 'react'
import { Tab, Tabs } from 'mui-tabs'
import 'mui-tabs/styles/main.css'
// or import 'mui-tabs/styles/scss/main.scss'
const App = () => {
const [value, setValue] = React.useState(1)
return (
<Tabs value={value} onChange={(value) => setValue(value)}>
<Tab value={1} label="Tab 1" />
<Tab value={2} label="Tab 2" />
</Tabs>
)
}
You need to install the react-transition-group package.
yarn add react-transition-group
Example
import * as React from 'react'
import { Tab, Tabs } from 'mui-tabs'
import RippleButton from 'mui-tabs/RippleButton'
import 'mui-tabs/styles/main.css'
import 'mui-tabs/styles/ripple.css'
// or import 'mui-tabs/styles/all.css'
// or import 'mui-tabs/styles/scss/all.scss'
const App = () => {
const [value, setValue] = React.useState(1)
return (
<Tabs
value={value}
variant="scrollable"
scrollButtons={true}
onChange={(value) => setValue(value)}
TabComponent={RippleButton}
ScrollButtonComponent={RippleButton}
allowScrollButtonsMobile={true}
>
<Tab value={1} label="Tab 1" />
<Tab value={2} label="Tab 2" />
<Tab value={3} label="Tab 3" />
<Tab value={4} label="Tab 4" />
<Tab value={5} label="Tab 5" />
<Tab value={6} label="Tab 6" />
<Tab value={7} label="Tab 7" />
</Tabs>
)
}
This project is licensed under the terms of the MIT license.