yazaabed / react-tabs

Simple React Tabs using the new react ContextAPI

React Tabs

Simple React Tabs using the new react ContextAPI to manage changes active tabs or not. And there is no need to add tabs container you just add a tab component.

Demo

• For quick demo please checkout this storybook.
• For quick code usage pelase checkout this codesandbox

Introduction

This project done using ReactJS and normal styling to add a small react-tabs component to your project without a huge library.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

Yarn

yarn add @feuer/react-tabs

Npm

npm install @feuer/react-tabs

This package also depends on react, tslib only esm for umd its already included, react-dom, prop-types. Please make sure you have it installed as well.

Usage

Try it out in the browser

import React from "react";
import { Tabs } from "@feuer/react-tabs";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const LeftTabs = () => (
  <div style={styles}>
    <Tabs
      activeTab={{
        id: "tab1"
      }}
    >
      <Tabs.Tab id="tab1" title="Tab 1">
        <div style={{ padding: 10 }}>
          This is tab 1
        </div>
      </Tabs.Tab>
      <Tabs.Tab id="tab2" title="Tab 2">
        <div style={{ padding: 10 }}>
          This is tab 2
        </div>
      </Tabs.Tab>
    </Tabs>
  </div>
);

Basic Props

This is the list of props that you should probably know about when using react-tabs.

Tabs Component Props

Tabs.propTypes = {
  activeTab: {
    id: PropTypes.string.isRequired,
  },
  children: PropTypes.arrayOf(PropTypes.node).isRequired,
  tabsProps: {
    style: PropTypes.object,
    className: PropTypes.string
  }
};

Tab Component Props

Tab.propTypes = {
  id: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  tabIndex: PropTypes.oneOf([PropTypes.string, PropTypes.number])
};

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Yazan Aabed
• See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

react-tabs's Issues

Any UMD build available at a CDN?

Hi, thanks for this!

Any UMD build available at a CDN?

Warning in console

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

package.json

"react": "^16.4.2",
"react-dom": "^16.4.2",

or

"react": "^16.5.2",
"react-dom": "^16.5.2",

or

"react": "^16.6.3",
"react-dom": "^16.6.3",

question by code

https://github.com/YazanAabeed/react-tabs/blob/d97adae6b29f368ed701b0d758ba013620604081/src/components/TabsContext.js#L16

probably meant 'isOldTabFound'?

onClick hook & dynamic active tab ?

Hi, simple and great library, but actually it misses some essential functionality

• i want to trigger my custom function whenever i click the title tab
• i also want to dynamically active tab from my current active state

how can i achieve these things ?

Warning in console

Code:

               <Tabs
                  activeTab={{
                    id: "tab1"
                  }}
                >
                  <Tabs.Tab id="tab1" title="English">
                    <div style={{ padding: "20px 0" }}>
                      <RightpanelEnglish />
                    </div>
                  </Tabs.Tab>
                  <Tabs.Tab id="tab2" title="Hindi">
                    <div style={{ padding: 10 }}>This is tab 2</div>
                  </Tabs.Tab>
                </Tabs>

Also, how can i update the style of tab such as blue line thickness, the colour of the font ?

P.S
Great package, helping me alot

Warning: Failed prop type

Warning: Failed prop type: Tabs: prop type activeTab is invalid; it must be a function, usually from the prop-types package, but received object.
in Tabs (at HomeBody.jsx:22)
in HomeBody (created by ConnectFunction)
in ConnectFunction (at Homepage.jsx:14)
in section (at Homepage.jsx:12)
in div (at Homepage.jsx:10)
in Homepage (created by Context.Consumer)
in Route (at App.js:12)
in Switch (at App.js:11)
in div (at App.js:10)
in App (at src/index.js:32)
in AuthIsLoaded (at src/index.js:31)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:30)
in ReactReduxFirebaseProvider (at src/index.js:29)
in Provider (at src/index.js:28)
in StrictMode (at src/index.js:27)

Okay I followed the demo but getting this warning