
I just finished up a project at work that required a tabbed interface that was swipeable on touch devices. In this post I will walk you through how I used a combination of [Reach Tabs](https://reach.tech/tabs/) and [React Swipeable](https://github.com/FormidableLabs/react-swipeable) to build out this component.

## Foundation

To start, we will build out the UI using Reach Tabs. We import the components needed and apply classNames to the elements to control styling. In our example we will not be using any of the default styles provided by `@reach/tabs` package.

```jsx:filename=SwipeableTabs.jsx
import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@reach/tabs';
import 'swipeable-tabs.css';

function SwipeableTabs({ items }) {
  return (
    <Tabs className="tabs">
      <TabList className="tabList">
        {items.map((item, index) => {
          return (
            <Tab key={index} className="tab">
              {item.label}
            </Tab>
          );
        })}
      </TabList>
      <TabPanels className="tabPanels">
        {items.map((item, index) => {
          return (
            <TabPanel key={index} className="tabPanel">
              {item.content}
            </TabPanel>
          );
        })}
      </TabPanels>
    </Tabs>
  );
}
```

With that setup, we can write some styles for our `SwipeableTabs`. On desktop screens we display the tabs inline and stack them on mobile devices.

```css:filename=swipeable-tabs.css
.tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  column-gap: 32px;
  row-gap: 16px;
}

.tabList {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.tab {
  appearance: none;
  border: 0;
  padding: 1rem;
  border-radius: 4px;
  background-color: lightGray;
  cursor: pointer;
}

.tab[data-selected] {
  background-color: lightblue;
}

.tabPanels {
  flex-grow: 1;
  display: grid;
  background-color: lightGray;
  border-radius: 4px;
  text-align: left;
  padding: 1rem;
}

.tabPanel {
  grid-area: 1 / 1;
  opacity: 1;
}

.tabPanel[hidden] {
  display: block;
  opacity: 0;
}

@media (min-width: 768px) {
  .tabs {
    flex-direction: row;
  }

  .tabList {
    flex-direction: column;
  }
}
```

We've simplified the styling here, but the main things to note is that the `tabPanel`'s are stacked on top of each other using CSS grid and we override the default `hidden` attribute styling to be `display: block` and `opacity: 0`. This allows us to the animate our tab panels `opacity` and `transforms` to create a nice transitions between tab changes. For more info, [checkout this screencast](https://www.youtube.com/watch?v=Fhu83TS9Mls) I made using this technique.

Here is a sample CodeSandbox with where we are at:

<CodeSandbox src="https://codesandbox.io/embed/swipeable-tabs-1-gtiux?fontsize=14&hidenavigation=1&theme=dark" />

## Tabs orientation

Since we are adjusting the tabs layout between desktop and mobile, we need to modify the tabs orientation value. This ensures keyboard users can use their <kbd>up</kbd> and <kbd>down</kbd> arrows in vertical orientation and <kbd>left</kbd> and <kbd>right</kbd> in horizontal orientation.

```jsx:filename=SwipeableTabs.jsx
import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@reach/tabs';
import 'swipeable-tabs.css';

function SwipeableTabs({ items }) {
  const [isStacked, setIsStacked] = useState(
    typeof window !== 'undefined'
      ? window.matchMedia('(max-width: 768px)').matches
      : true,
  );

  useEffect(() => {
    const handleResize = () => {
      setIsStacked(window.matchMedia('(max-width: 768px)').matches);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [isStacked]);

  return (
    <Tabs className="tabs" orientation={isStacked ? 'horizontal' : 'vertical'}>
      <TabList className="tabList">
        {items.map((item, index) => {
          return (
            <Tab key={index} className="tab">
              {item.label}
            </Tab>
          );
        })}
      </TabList>
      <TabPanels className="tabPanels">
        {items.map((item, index) => {
          return (
            <TabPanel key={index} className="tabPanel">
              {item.content}
            </TabPanel>
          );
        })}
      </TabPanels>
    </Tabs>
  );
}
```

## Direction aware animations

With our foundation in place, lets add some transitions in between tab changes.

```css:filename=swipeable-tabs.css
.tabPanel {
  opacity: 0;
  animation-duration: 0.4s;
}

.slideInLeft {
  animation-name: slideInLeft;
}

.slideInRight {
  animation-name: slideInRight;
}

.slideOutLeft {
  animation-name: slideOutLeft;
}

.slideOutRight {
  animation-name: slideOutRight;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(50px);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50px);
  }
}
```

And now will update our `SwipeableTabs` component to make use of the transitions based on `activeTabIndex` and `prevTabIndex`. To do this will need to convert our component to be a controlled component so that we can manage these indexes.

```jsx:filename=SwipeableTabs.jsx&highlight={4-10,13-17,20}
import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@reach/tabs';
import 'swipeable-tabs.css';

function usePreviousIndex(value) {
  const ref = useRef(0);
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

function SwipeableTabs({ items }) {
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const prevActiveIndex = usePreviousIndex(activeTabIndex);
  const handleTabsChange = (index) => {
    setActiveTabIndex(index);
  };

  return (
    <Tabs className="tabs" index={activeTabIndex} onChange={handleTabsChange}>
      <TabList className="tabList">
        {items.map((item, index) => {
          return (
            <Tab key={index} className="tab">
              {item.label}
            </Tab>
          );
        })}
      </TabList>
      <TabPanels className="tabPanels">
        {items.map((item, index) => {
          return (
            <TabPanel key={index} className="tabPanel">
              {item.content}
            </TabPanel>
          );
        })}
      </TabPanels>
    </Tabs>
  );
}
```

With that update, we now have all of the info to inform our tab panel animations. Here we make use of the `clsx` package to manage classNames. Based on the indexes, we conditionally apply classes to animate the active and previous tab panels in and out.

```jsx:filename=SwipeableTabs.jsx
import cx from 'clsx';

<TabPanel
  key={index}
  className={cx('tabPanel', {
    slideInLeft: activeTabIndex === index && activeTabIndex > prevTabIndex,
    slideInRight: activeTabIndex === index && activeTabIndex < prevTabIndex,
    slideOutLeft: prevTabIndex === index && activeTabIndex < prevTabIndex,
    slideOutRight: prevTabIndex === index && activeTabIndex > prevTabIndex,
  })}
>
  {item.content}
</TabPanel>;
```

<CodeSandbox src="https://codesandbox.io/embed/swipeable-tabs-2-4s30t?fontsize=14&hidenavigation=1&theme=dark" />

## Make it swipeable

So the last thing we need to do is implement swiping functionality for tab panels on touch devices. To do this will make use of the `react-swipeable` package. We use the `useSwipeable` hook to intercept the direction of users swipe and pass that to our `handleSwipe` function and update the `activeTabIndex`.

```jsx:filename=SwipeableTabs.jsx&highlight={3,18-20,26-40,58}
import { useState, useRef, useEffect } from 'react';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@reach/tabs';
import { useSwipeable } from 'react-swipeable';
import cx from 'clsx';
import './swipeable-tabs.css';

function usePreviousIndex(value) {
  const ref = useRef(0);
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

function SwipeableTabs({ items }) {
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const prevTabIndex = usePreviousIndex(activeTabIndex);
  const swipeHandlers = useSwipeable({
    onSwiped: ({ dir }) => handleSwipe(dir),
  });

  const handleTabsChange = (index) => {
    setActiveTabIndex(index);
  };

  const handleSwipe = (dir) => {
    if (dir === 'Right') {
      if (activeTabIndex === 0) {
        return;
      } else {
        setActiveTabIndex((prevIndex) => prevIndex - 1);
      }
    } else if (dir === 'Left') {
      if (activeTabIndex >= items.length - 1) {
        return;
      } else {
        setActiveTabIndex((prevIndex) => prevIndex + 1);
      }
    }
  };

  return (
    <Tabs
      className="tabs"
      orientation="vertical"
      index={activeTabIndex}
      onChange={handleTabsChange}
    >
      <TabList className="tabList">
        {items.map((item, index) => {
          return (
            <Tab key={index} className="tab">
              {item.label}
            </Tab>
          );
        })}
      </TabList>
      <TabPanels className="tabPanels" {...swipeHandlers}>
        {items.map((item, index) => {
          return (
            <TabPanel
              key={index}
              className={cx('tabPanel', {
                slideInLeft:
                  activeTabIndex === index && activeTabIndex > prevTabIndex,
                slideInRight:
                  activeTabIndex === index && activeTabIndex < prevTabIndex,
                slideOutLeft:
                  prevTabIndex === index && activeTabIndex < prevTabIndex,
                slideOutRight:
                  prevTabIndex === index && activeTabIndex > prevTabIndex,
              })}
            >
              {item.content}
            </TabPanel>
          );
        })}
      </TabPanels>
    </Tabs>
  );
}
```

And here is our final implementation. If you open the sandbox in a new browser window and emulate a mobile device using devtools, you can swipe through the tab panels.

<CodeSandbox src="https://codesandbox.io/embed/swipeable-tabs-3-i2czk?fontsize=14&hidenavigation=1&theme=dark" />


Learn how to build a swipeable tabbed interface using Reach Tabs and React Swipeable.

Building a swipeable tabbed interface with React


Input groups, popularlized by Bootstrap, is a pattern that includes an input with a label and/or a button element.

```html
<div class="input-group">
  <div class="input-group-prepend">
    <label for="name">Name</label>
  </div>
  <input type="text" name="name" id="name" />
</div>
```

We wrap the elements in a div with a class of `input-group`. We will use this element to provide our focus styles. We also wrap our label in an element with a class of `input-group-prepend` which allows us to add a border to the right of the label. We could also have a `input-group-append` class which would add a border to the left of the label.

Now that we have our markup structure in place, we can start to apply our styling to the elements.

```scss
.input-group {
  display: inline-flex;
  border: 1px solid #ddd;

  input {
    padding: 1rem;
    border: 0;
    font: inherit;

    // Since we are providing an alternative focus
    // style, it is safe to remove the focus styling
    // from the input itself
    &:focus {
      outline: none;
    }
  }

  label {
    padding: 1rem;
  }
}
```

Now we can now watch for focus within our input group and adjust our border color and apply a box-shadow.

```scss:highlight={2-5}
.input-group {
  &:focus-within {
    border-color: #05f;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
}
```

[View the demo](https://codepen.io/alexcarpenter/pen/PobzRXr).


Using focus-within to style input groups


Words that break to their own line when there is not enough horizontal space are often refered to as "widows". This can be awkward, so it's often common to ensure there are always at least two words on the last line.

```
Getting started with
JavaScript
```

To prevent this from happening, it's common to add a `&nbsp;` in between the last two words. Here is a helper function that uses Regex to find the last word with a space before it in a string, and replaces the space with a `&nbsp;`.

```js
const widont = (str) => {
  const REGEX = /\s((?=(([^\s<>]|<[^>]*>)+))\2)\s*$/;
  return str.replace(REGEX, '\u00A0$1');
};
```

Now in the case that JavaScript breaks to its own line, both `with` and `JavaScript` will go to the next line. Preventing any awkward "widows" across your website.

```
Getting started
with JavaScript
```


Preventing widows with a widont helper function


I, like a lot of folks these days make heavy use of emoji's in text communication throughout the day. I was about to add an emoji within a new post on this site and remembered that there are some [limitations of how emojis work on the web](https://tink.uk/accessible-emoji/), requiring a bit more work.

Since my blog is built on top of MDX, I built a small React component that takes a `label` and a `symbol` as props and returns markup to be used by screen readers.

Usage:

```jsx
<Emoji label="bacon" symbol="🥓" />
```

Which ouputs:

```html
<span role="img" aria-label="bacon">🥓</span>
```


Building an accessible emoji component for my MDX blog


When building client sites, it was a common request to adjust grid layouts based on content types. For example, if the content type was a blog article, we wanted to display three items per row and include a gap between the items equal to `1rem`. If the content type was a calendar event, we wanted two items per row and increase the gap to `2rem`.

To do this, we would typically create grid variants based on type – `grid--article`, `grid--event`, etc. This required us to know the content types before hand and increased the amount of CSS needed for our grid object.

Now we can make use of CSS grid and custom properties to create a flexible grid system. Below we create our grid object and create a custom property for `grid-gap` and `grid-items-per-row` and set their default values.

```css
.o-grid {
  --grid-gap: 1rem;
  --grid-items-per-row: 3;
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat((var(--grid-items-per-row)), 1fr);
}
```

Now we can use of grid object with our defaults as seen below. With this we'd expect to see three items per row with a grid gap of `1rem`.

```html
<div class="o-grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

If we want to override the defaults, we can set our custom properties inline. Now we'd have a grid with two items per row and a grid gap of `2rem`.

```html
<div class="o-grid" style="--grid-gap: 2rem; --grid-items-per-row: 2;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

[Here's a demo on CodePen](https://codepen.io/alexcarpenter/pen/Vwwgywd) that you can play with.


How to create a flexible grid solution with custom properties.