@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