React-metro-tabs NPM

React Metro Tabs

windows phone style tabs in react.js

Install

npm install react-metro-tabs

yarn add react-metro-tabs

Demo

npm.io

Github Pages

CodeSandbox

Sandbox

Example Usage

import React, { Component } from "react";

import { MetroTabs, MetroTab } from "react-metro-tabs";

export default function App() {
  return (
    <div
      style={{
        border: "2px solid black",
        borderRadius: 10,
        height: 500,
        width: 300,
      }}
    >
      <MetroTabs onTabChange={(e) => console.log(e)} tabSpaces={50}>
        <MetroTab title='landing page'>content1</MetroTab>
        <MetroTab title='study cases'>content2</MetroTab>
        <MetroTab title='contact us'>content3</MetroTab>
      </MetroTabs>
    </div>
  );
}

MetroTabs props

Prop	Type	Description	Default
transitionDuration	number	transition duration	1000
tabSpaces	number	space between tabs, make it dynamic for making responsive	70
tabsColor	string	color of all tabs	"#000"
tabFontSize	number	font size of all tabs	"2.5em"
tabFontWeight	number	font weight of all tabs	"normal"
transitionTimingFunction	string	transition timing function	"ease"
onTabChange	Function	function that triggers on tab change
children	Node	children (only MetroTab is allowed)