# ddm-tabs

> React Tab component

Latest version **1.1.0** (published 2016-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install ddm-tabs
pnpm add ddm-tabs
yarn add ddm-tabs
bun add ddm-tabs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2016-03-24 |
| First published | 2015-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Russell Ahlstrom |
| Maintainers | janiv, jluker, mkartchner994, ponchorage, quiet-omen |

## Links

- npm: https://www.npmjs.com/package/ddm-tabs
- Repository: https://github.com/deseretdigital-ui/ddm-tabs
- Issues: https://github.com/deseretdigital-ui/ddm-tabs/issues
- npm.io page: https://npm.io/package/ddm-tabs

## Dependencies (1)

- [ddm-collapsible](https://npm.io/package/ddm-collapsible.md) ^1.0.0

## Recent versions

- 1.1.0 (latest) — 2016-03-24
- 1.0.1 — 2016-01-27
- 1.0.0 — 2016-01-22
- 0.0.1 — 2015-01-09

## README

# DDM Tabs

Documentation coming soon

## Simple Example

```js
ReactDom.render(
  <Tabs>
    <Tab title="Frogs">
      <p>Frogs live in ponds.</p>
    </Tab>
    <Tab title="Sea Turtles">
      <p>Sea turtles live in seas.</p>
    </Tab>
  </Tabs>,
  document.getElementById('idOfTargetElement')
);
```

## Programmaticlly Change The Active Tab Based On State/Props

Programmaticlly changing the active tab currently only works for the `<Tabs>` component and **NOT** the `<TabsResponsive>` component.

```js
var ProgrammaticallyChangedActiveTab = React.createClass({

  getInitialState: function() {
    return {
      activeId: 'frogs'
    }
  },

  _handleButton: function(type, e) {
    e.preventDefault();
    this.setState({ activeId: type });
  },

  render: function() {
    return (
      <div>
        <button onClick={this._handleButton.bind(this, 'frogs')}>Frogs</button>
        <button onClick={this._handleButton.bind(this, 'turtles')}>Turtles</button>
        
        <Tabs activeId={this.state.activeId}>
          <Tab title="Frogs" id="frogs">
            <p>Frogs live in ponds.</p>
          </Tab>
          <Tab title="Turtles" id="turtles">
            <p>Sea turtles live in seas.</p>
          </Tab>
        </Tabs>
      </div>
    );
  }

});

ReactDOM.render(
  <ProgrammaticallyChangedActiveTab />,
  document.getElementById('idOfTargetElement')
);
```

---
_Source: https://npm.io/package/ddm-tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._