Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-tab-view with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactTabView = require("react-tab-view")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-tab-view v1.1.1

a simple tab component

react-tab-view

npm version

react-tab-view is a simple tabs component using react.js.

Install

yarn add react-tab-view

Usage

import { Tabs, Tab } from 'react-tab-view'
import ReactDOM from 'react-dom'
import React, { Component } from 'react'

class TestComponent extends Component {
  handleChange(e) {
    this.setState({ value: e })
    console.log(e)
  }

  render() {
    const headers = ['Heading 1', 'Heading 2', 'Heading 3']

    return (
      <div>
        <Tabs headers={headers}>
          <Tab>
            <div>
              <p>This is the first tab</p>
              <p>with some content</p>
            </div>
          </Tab>
          <Tab>
            <p>This is the second tab</p>
          </Tab>
          <Tab>
            <p>This is the third tab</p>
          </Tab>
        </Tabs>
      </div>
    )
  }
}

ReactDOM.render(<TestComponent />, document.getElementById('root'))

Styles

Uses styled-components 💅 for the base styling.

Development

yarn
yarn dev

Test

yarn test

Build

yarn
yarn build

Publish

npm login
npm version patch
git add -A
git push origin master
npm publish

License

MIT

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free