# @slice-and-dice/govuk-react-tabs

> govuk-react Tabs component.

Latest version **0.7.1** (published 2021-03-10) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @slice-and-dice/govuk-react-tabs
pnpm add @slice-and-dice/govuk-react-tabs
yarn add @slice-and-dice/govuk-react-tabs
bun add @slice-and-dice/govuk-react-tabs
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.7.1 |
| Published | 2021-03-10 |
| First published | 2021-03-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 154.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | David Murdoch |
| Maintainers | david-kasali, matthew-moles-civica, simon.thomas, davidbrown123, hamza.khaleel, pktw2827, jpry11, paul.burnett |

## Links

- npm: https://www.npmjs.com/package/@slice-and-dice/govuk-react-tabs
- Homepage: https://github.com/govuk-react/govuk-react/tree/master/components/tabs
- npm.io page: https://npm.io/package/@slice-and-dice/govuk-react-tabs

## Dependencies (3)

- [govuk-colours](https://npm.io/package/govuk-colours.md) ^1.1.0
- [@slice-and-dice/govuk-react-lib](https://npm.io/package/@slice-and-dice/govuk-react-lib.md) ^0.7.2
- [@slice-and-dice/govuk-react-constants](https://npm.io/package/@slice-and-dice/govuk-react-constants.md) ^0.7.2

## Recent versions

- 0.7.1 (latest) — 2021-03-10

## README

Tabs
====

### Import
```js
  import Tabs from '@govuk-react/tabs';
```
<!-- STORY -->

### Import
```js
import Tabs from '@govuk-react/tabs';
```

##### Simple Example
```js
class App extends Component {
  constructor() {
    super();
    this.state = { tabIndex: 0 };
    this.setTabIndex = this.setTabIndex.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  setTabIndex(newTabIndex) {
    this.setState({
      tabIndex: newTabIndex,
    }));
  }

  handleClick(e, index) {
    const mql = window.matchMedia(`(min-width: ${BREAKPOINTS.TABLET})`);
    if (mql.matches) {
      e.preventDefault();
    }
    return this.setTabIndex(index);
  }

  render() {
    const { tabIndex } = this.state;
    return (
      <Tabs>
        <Tabs.Title>Content</Tabs.Title>
        <Tabs.List>
          <Tabs.Tab
            onClick={(event) => this.handleClick(event, 0)}
            selected={tabIndex === 0}
            href="#first-panel"
          >
            Title 1
          </Tabs.Tab>
          <Tabs.Tab
            onClick={(event) => this.handleClick(event, 1)}
            selected={tabIndex === 1}
            href="#second-panel"
          >
            Title 2
          </Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel selected={tabIndex === 0} id="first-panel">Panel content 1</Panel>
        <Tabs.Panel selected={tabIndex === 1} id="second-panel" >Panel content 2</Panel>
      </Tabs>
    );
  }
}
```

##### Hooks Example
```js
const App = ({ defaultIndex }) => {
  const [tabIndex, setTabIndex] = React.useState(defaultIndex);

  const handleTabChange = newTabIndex => setTabIndex(newTabIndex);

  function handleClick({ event: e, index }) {
    const mql = window.matchMedia(`(min-width: ${BREAKPOINTS.TABLET})`);
    if (mql.matches) {
      e.preventDefault();
    }
    return handleTabChange(index);
  }

  return (
    <Tabs>
      <Tabs.Title>Content</Tabs.Title>
      <Tabs.List>
       {[
          {
            content: 'Title 1',
            href: '#first-panel',
          },
          {
            content: 'Title 2',
            href: '#second-panel',
          },
        ].map(({ content, href }, index) => (
          <Tabs.Tab
            onClick={(event) => handleClick({ event, index })}
            selected={tabIndex === index}
            href={href}
          >
           {content}
          </Tabs.Tab>
        ))}
      </Tabs.List>
      {[
        {
          content: 'Panel content 1',
          id: 'first-panel',
        },
        {
          content: 'Panel content 2',
          id: 'second-panel',
        },
      ].map(({ content, id }, index) => (
        <Tabs.Panel
          selected={tabIndex === index}
          id={id}
        >
         {content}
        </Tabs.Panel>
      ))}
    </Tabs>
  );
}

```


### References:
- https://github.com/alphagov/govuk-frontend/tree/master/src/components/tabs
- https://design-system.service.gov.uk/components/tabs/

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
 `children` | true | `````` | node | child components that will appear in the Tabs section

---
_Source: https://npm.io/package/@slice-and-dice/govuk-react-tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._