1.1.1 • Published 5 years ago
@liinkiing/react-tabs v1.1.1
@liinkiing/react-tabs
A composable React tabs library
Install
npm install --save @liinkiing/react-tabs
Or
yarn add @liinkiing/react-tabs
Internally, it uses framer/motion packages for the animations between the tab content. It is referenced as a peerDependency, and you should add framer-motion
to your packages if you are not already using it.
npm install --save framer-motion
Or
yarn add framer-motion
Usage
You can use the animate
, initial
and exit
props in <Tabs>
component to customize the behaviour of the transitions.
import * as React from 'react'
import { Tab, Tabs } from '@liinkiing/react-tabs'
class Example extends React.Component {
render () {
return (
<Tabs
{/* These values are the ones by default */}
initial={{opacity: 0, x: 40}}
animate={{opacity: 1, x: 0}}
exit={{opacity: 0, x: 40}}
>
<Tab>
<Tab.Title>First tab</Tab.Title>
<Tab.Content>First Content</Tab.Content>
</Tab>
<Tab>
<Tab.Title>Second tab</Tab.Title>
<Tab.Content>Second content</Tab.Content>
</Tab>
</Tabs>
)
}
}
License
MIT © liinkiing