react-ui-tabview

A tabview component for react, based on the superflows design language

Demo

Note

This package is under active development. Expect frequent updates.

Install

npm install --save react-ui-tabview

Install the dependencies

Dependencies

npm install --save bootstrap
npm install --save react-bootstrap
npm install --save react-bootstrap-icons

Usage

import React from 'react'

import { TabView } from 'react-ui-tabview'
import 'bootstrap/dist/css/bootstrap.min.css';
import Themes from 'react-ui-themes-superflows';

const App = () => {

  function onSelectedTab (index) {
    console.log('selected tab', index);
  }

  const tabsData = [
    {
      caption: 'My Opd',
      icon: "BagPlus",
      component: <div className='text-center pt-5'>My Opd</div>
    },
    {
      caption: 'Connect',
      icon: "ArrowUpRightCircle",
      component: <div className='text-center pt-5'>Connect</div>
    },
    {
      caption: 'Profile',
      icon: "Person",
      component: <div className='text-center pt-5'>Profile</div>
    },
  ];

  const navigationData = {
    menuIcon: "List",
    title: "Mission Spine"
  };

  return (
    <TabView 
      tabsData={tabsData} 
      navigationData={navigationData}
      theme={Themes.getTheme("Default")}
      setSelectedTab={0}
      onSelectedTab={onSelectedTab}
      />
  )
}

export default App

License

MIT © superflows-dev