mostafarostami72 / react-best-tabs

A great package to easily create beautiful tabs in React Js

react-best-tabs

A great package to easily create beautiful tabs in React Js

Full Document

• Document

Demo

• Demo

Install

npm install --save react-best-tabs

Usage

import React, { Component } from 'react'
import Tabs, {Tab} from 'react-best-tabs';
import 'react-best-tabs/dist/index.css';


class Example extends Component {
  render() {
    return (
        <Tabs
          activeTab="1"
          className=""
          ulClassName=""
          activityClassName="bg-success"
          onClick={(event, tab) => console.log(event, tab)}
        >
            <Tab title="tab 1" className="mr-3">
                <div className="mt-3">
                    Tab 1 content
                </div>
            </Tab>
            <Tab title="tab 2" className="mr-3">
                <div className="mt-3">
                    Tab 2 content
                </div>
            </Tab>
            <Tab title="tab 3" className="mr-3">
                <div className="mt-3">
                    Tab 3 content
                </div>
            </Tab>
        </Tabs>
    )
  }
}

Support

We are glad you choose this package. If this package is useful for you, please give us a star.

License

MIT © MostafaRostami72

react-best-tabs's Issues

Sticky Tabs

Thanks for this wonderful package.
I have a requirement to make the Tab header sticky and the content scrollable when the page is scrolled.
How do I achieve this with your pckage?

Active Tab Style

Thanks for creating this amazing component! How do I apply style to the active tab title background? I have tried doing that with no success apart from editing the css directly

Orientation

How make this vertical?

Getting Warning when import "Tabs" component in [email protected]

When I import Tabs component in my code I got this warning!

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at index.tsx:57.
    at AuthModel (webpack-internal:///./components/auth-model/index.tsx:80:22)
    at Layout (webpack-internal:///./components/layout/common.tsx:41:19)
    at Home
    at QueryParamProviderInner (/code/digistore/node_modules/use-query-params/dist/index.cjs.js:329:3)
    at NextAdapter (/code/digistore/node_modules/next-query-params/dist/next-query-params.cjs.development.js:11:23)
    at QueryParamProvider (/code/digistore/node_modules/use-query-params/dist/index.cjs.js:348:3)
    at App (webpack-internal:///./pages/_app.tsx:41:16)
    at StyleRegistry (/code/digistore/node_modules/styled-jsx/dist/index/index.js:449:36)
    at PathnameContextProviderAdapter (/code/digistore/node_modules/next/dist/shared/lib/router/adapters.js:60:11)
    at AppContainer (/code/digistore/node_modules/next/dist/server/render.js:289:29)
    at AppContainerWithIsomorphicFiberStructure (/code/digistore/node_modules/next/dist/server/render.js:325:57)
    at div
    at Body (/code/digistore/node_modules/next/dist/server/render.js:612:21)

here is how I'm importing

import Tabs, { Tab } from "react-best-tabs";

Edit

I changed my code

From

<Tabs>
    <Tab>
        <form>
            <input placeholder="email" />
            <input placeholder="password" />
            <button>Login</button>
        </form>
    </Tab>
<Tabs>

To

<Tabs>
    <Tab>
        <LoginForm />
    </Tab>
<Tabs>

and I'm no longer getting this warning!