react-z / react-tab-view Goto Github PK

View Code? Open in Web Editor NEW

12.0 4.0 4.0 3.05 MB

a simple tabs control

JavaScript 99.05% HTML 0.95%

react-tab-view's Introduction

react-tab-view

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

react-tab-view's People

Contributors

Stargazers

Watchers

Forkers

flurb knmi thiruppathi-svmx naheedsa

react-tab-view's Issues

Render function of Tabs is missing a key

When using the package, a warning is thrown constantly with the following message:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Tabs. See https://fb.me/react-warning-keys for more information.

As far as I am concerned, there is a key missing for the render function in tabs.js
I have tried to include a key and it worked.

Could this issue please be fixed ?

can't accept other react components inside a tab.

I have a react component:

import React from 'react';
var ReactDom = require('react-dom');


Drawing = React.createClass({

componentDidMount: function() {
    var el = ReactDom.findDOMNode(this); // This is de div we are rendering
    var svg = d3.select(el)
        .append("svg");
        //.attr("viewBox", "0 0 100 100")
        //.attr("preserveAspectRatio", "xMidYMid meet");
    var circleSelection = svg.append("circle")
          .attr("cx", 25)
          .attr("cy", 25)
          .attr("r", 25)
          .style("fill", "purple");
},

render: function() {

    return (
        <div className="drawing" style={{"border":"1px solid black"}}></div>
    );
}
});

If I try to insert it in a tab structure like this:

render() {
    return (
        <Tabs headers ={["Drawing", "Import", "Color Legend", "Tube Sheet", "3D", "Report"]} >
            <Tab >
                <div className="buttons">
                    <button>
                        Fun
                    </button>
                    <button>
                        Move
                    </button>
                </div>
                <Drawing />
            </Tab>
            <Tab>
                <h1>Import</h1>
            </Tab>
            <Tab >
                <h1>Color Legend</h1>
            </Tab>
            <Tab >
                <h1>Tube Sheet</h1>
            </Tab>
            <Tab>
                <h1>3D</h1>
            </Tab>
            <Tab>
                <h1>Report</h1>
            </Tab>
        </Tabs>
    );
}

I get this Warning: Failed prop type: Invalid prop children of type array supplied to Tab, expected object.
in Tab

The component works elsewhere without error. I even broke down the Drawing react component so it only returned a div and it was still putting out this warning.

Change the styles

I want to change the style, but I can't do this

import styled from 'styled-components';

import { Tabs } from 'react-tab-view';

export default styled(Tabs)`
  border: 0;
  background: ${({ theme }) => theme.colors.eden};
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  border-radius: 10px;
`;

React.PropTypes

getting the following console warning, I believe due to this component. Do you have any plans to update it?

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Tab inside tab not working

Support for react 15?

Will this continue to be supported with the new version of react?

Not showing up as Tabs

I had the following code which is being mounted in flow router. I just got an unordered list of "heading1"," heading2", then two paragraphs of "This is the first tab's content", and "This is the second tab's content", but no tabs. I was really looking for a nice lightweight tab component like this. I wish it would have worked.

import { Tabs, Tab } from 'react-tab-view';
import React, { Component, PropTypes } from 'react'

TabComponent = React.createClass({

render() {
    return(
    <div>
        <Tabs headers={['heading 1', 'heading 2']}>
            <Tab>
                <p>This is the first tab's content</p>
            </Tab>
            <Tab>
                <p>This is the second tab's content</p>
            </Tab>
        </Tabs>
    </div>
);
}

});