
The Tab component is a very basic component. Any complex app likely has one and there are quite a few solutions already out there. Implementing a tab component can be as easy as adding some CSS and toggling panes using that, much like what Bootstrap and other CSS frameworks do.

But, I decided to implement one myself in React. I'll admit, it does appear a bit convoluted but it was good practice and I decided to blog about it thinking someone might find it useful. So here goes.

First, let's chalk out an outline of our component.

```jsx
import React, { useState } from 'react';
import PropTypes from 'prop-types';

//Tab nav and corresponding Tab pane must have same ID.
function Tabs({ children, activeTabDefault, ...otherProps }) {
  const [activeTab, setActiveTab] = useState(activeTabDefault);
  return (
    <div className="tab" {...otherProps}>
      {children}
    </div>
  );
}

function TabNav({ children, ...otherProps }) {
  return React.createElement(React.Fragment, [otherProps], children);
}

function TabPane({ children, ...otherProps }) {
  return React.createElement(React.Fragment, [otherProps], children);
}

Tabs.Nav = TabNav;
Tabs.Pane = TabPane;

Tabs.propTypes = {
  activeTabDefault: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    .isRequired,
};

export default Tabs;
```

Here, we have created three components. TabNav and TabPane are nearly identical and we can always refactor them later. I intended to use them as such.

```jsx
export default function Home() {
  return (
    <div>
      <Tabs activeTabDefault="tab-2">
        <Tabs.Nav>
          <span id="tab-1">Tab 1</span>
          <span id="tab-2">Tab 2</span>
          <span id="tab-3">Tab 3</span>
        </Tabs.Nav>
        <Tabs.Pane>
          <div id="tab-1">Tab 1</div>
          <div id="tab-2">Tab 2</div>
          <div id="tab-3">Tab 3</div>
        </Tabs.Pane>
      </Tabs>
    </div>
  );
}
```

Here, the **Tabs** component will accept **Tabs.Nav** and **Tabs.Pane** as children. The user can toggle panes by clicking on navigation. Which pane should be shown is decided based on `id` prop passed to nav and panes. Additionally, our component accepts, a prop `activeTabDefault` , so that a default tab is visible when the component mounts.

Back to our **Tabs** component.

```jsx
function Tabs({ children, activeTabDefault, ...otherProps }) {
  const [activeTab, setActiveTab] = useState(activeTabDefault);
  return (
    <div className="tab" {...otherProps}>
      {React.Children.map(children, (child) => {
        if (child.type.name === 'TabNav') {
          return (
            <div className="tab-nav">
              {React.Children.map(child.props.children, (child) => {
                if (React.isValidElement(child)) {
                  return React.cloneElement(child, {
                    className: `${child.props?.className || ''} ${
                      child.props.id === activeTab ? 'active' : ''
                    }`,
                    onClick: () => {
                      setActiveTab(child.props.id);
                      if (child.props.onClick) {
                        child.props.onClick();
                      }
                    },
                  });
                }

                return child;
              })}
            </div>
          );
        }
      })}
    </div>
  );
}
```

Here, I'm looping over `children` and checking for **TabNav**. If found, I'll wrap it in a `div` with our custom class name `tab-nav` . We'll next be looping over, its children. If a valid child, we'll be passing it an additional prop, `onClick` . Here, we'll set the current active tab using `useState` hook.

Now, all we're left with is the part where we need to filter, which pane to show based on the tab that is active.

```jsx
function Tabs({ children, activeTabDefault, variant, ...otherProps }) {
  const [activeTab, setActiveTab] = useState(activeTabDefault);

  return (
    <div className={`tab tab--${variant}`} {...otherProps}>
      {React.Children.map(children, (child) => {
        if (child.type.name === 'TabNav') {
          //Check below
          return (
            <div className="tab-nav d-flex align-items-center">
              {React.Children.map(child.props.children, (child) => {
                if (React.isValidElement(child)) {
                  return React.cloneElement(child, {
                    className: `${child.props?.className || ''} ${
                      child.props.id === activeTab ? 'active' : ''
                    }`,
                    onClick: () => {
                      setActiveTab(child.props.id);
                      if (child.props.onClick) {
                        child.props.onClick();
                      }
                    },
                  });
                }

                return child;
              })}
            </div>
          );
        } else {
          return (
            <div className="tab-pane">
              {React.Children.toArray(child.props.children).filter((child) => {
                if (
                  React.isValidElement(child) &&
                  child.props.id === activeTab
                ) {
                  return React.cloneElement(child, {
                    className: `${child.props?.className || ''} ${
                      child.props.id === activeTab ? 'active' : ''
                    }`,
                  });
                }
              })}
            </div>
          );
        }
      })}
    </div>
  );
}
```

We'll be looping over all the children of **Tabs.Pane** same as **Tabs.Pill**. Here, we'll filter our active pane based on `activeTab` and return it. We're additionally adding `active` so as to allow some control over styling the active tab pane when necessary.

This code might be far from perfect as there is always room for improvement. Next, let's add some styling and make it pretty.

```css
* {
  box-sizing: border-box;
}

body {
  background: antiquewhite;
}

.tab {
  margin: 1rem;
}

.tab-nav span {
  padding: 4px 4px 0 4px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  margin-right: 2px;
  background: azure;
  cursor: pointer;
}

.tab-nav span.active {
  background-color: aquamarine;
}

.tab-pane {
  border: 1px solid black;
  padding: 1rem;
  background-color: white;
}
```

Here's how it looks finished.

<Glitch
  embedUrl="https://glitch.com/embed/#!/embed/chestnut-twisty-fog?path=src/styles/styles.css&previewSize=0"
  title="chestnut-twisty-fog on Glitch"
  allow="geolocation; microphone; camera; midi; vr; encrypted-media"
/>


Creating a basic Tab component in React

Recently I started working on a project for a client that involves working with Twig templates. I have some prior experience with templating syntax and so this should be familiar. However, having worked for the past year with _React,_ I quickly came to miss the convenience of components.

In case one is not familiar with React, a component is an independent and reusable piece of code. Enough of them and you can build amazing interfaces.

There may be a few ways to go about it but we're currently using _macros_ and _embeds_ for creating components. For elements such as **Buttons**, **Alerts** and **Inputs,** components were created using **macros** and for components such as **Modals** using _embeds._

Here is an example of a **Button** component created using twig.

**`button.twig`**

```twig
{% macro Button(props = {}) %}
  {% import "icons.twig" as appIcons %}

  {% set label = '' %}
  {% set title = '' %}
  {% set type = "button" %}
  {% set element = "button" %}
  {% set variant = "primary" %}
  {% set disabled = false %}
  {% set properties = '' %}
  {% set classname = [] %}
  {% set icon = null %}

  {% for key, prop in props %}
    {% if key == "label" %}
      {% set label =  prop %}
    {% elseif key == "type" %}
      {% set type = prop %}
    {% elseif key == "class" %}
      {% set classname = prop %}
    {% elseif key == "variant" %}
      {% set variant =  prop %}
    {% elseif key == "disabled" %}
      {% set disabled = prop %}
    {% elseif key == "islink" and prop == true %}
      {% set element = "a" %}
    {% elseif key == "icon" %}
      {% set icon = prop %}
    {% else %}
      {% set properties = properties ~ key|e('html_attr') ~ '="' ~ prop|e('html_attr') ~ '" ' %}
    {% endif %}
  {% endfor %}

  <{{element}} type="{{ type }}" class="border-{{ variant }}-400 hover:bg-{{ variant }}-200 {{ classname|join(' ') }}" title="{{label}}" {{properties|raw}} {% if disabled %} disabled {% endif %} >
    {% if label %}
      <span>{{ label }}</span>
    {% endif %}
    {{ appIcons.Icon(icon) }}
  </{{element}}>
{% endmacro %}
```

**`icons.twig`**

```twig
{% macro Icon(name = null, width = 80, height = 80) %}
	{% if name == "catspinner" %}
      <svg class="lds-bluecat" width="{{width}}px"  height="{{height}}px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
        <g transform="rotate(0.97464 50 50)">
          <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1" begin="-0.15000000000000002s"></animateTransform>
          <circle cx="50" cy="50" r="39.891" stroke="#6994b7" stroke-width="14.4" fill="none" stroke-dasharray="0 300">
            <animate attributeName="stroke-dasharray" values="15 300;55.1413599195142 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"></animate>
          </circle>
          <circle cx="50" cy="50" r="39.891" stroke="#eeeeee" stroke-width="7.2" fill="none" stroke-dasharray="0 300">
            <animate attributeName="stroke-dasharray" values="15 300;55.1413599195142 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"></animate>
          </circle>
          <circle cx="50" cy="50" r="32.771" stroke="#000000" stroke-width="1" fill="none" stroke-dasharray="0 300">
            <animate attributeName="stroke-dasharray" values="15 300;45.299378454348094 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"></animate>
          </circle>
          <circle cx="50" cy="50" r="47.171" stroke="#000000" stroke-width="1" fill="none" stroke-dasharray="0 300">
            <animate attributeName="stroke-dasharray" values="15 300;66.03388996804073 300;15 300" keyTimes="0;0.5;1" dur="1.5s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.069s"></animate>
          </circle>
        </g>

        <g transform="rotate(11.1822 50 50)">
          <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1">
          </animateTransform>
          <path fill="#6994b7" stroke="#000000" d="M97.2,50.1c0,6.1-1.2,12.2-3.5,17.9l-13.3-5.4c1.6-3.9,2.4-8.2,2.4-12.4"></path>
          <path fill="#eeeeee" d="M93.5,49.9c0,1.2,0,2.7-0.1,3.9l-0.4,3.6c-0.4,2-2.3,3.3-4.1,2.8l-0.2-0.1c-1.8-0.5-3.1-2.3-2.7-3.9l0.4-3 c0.1-1,0.1-2.3,0.1-3.3"></path>
          <path fill="#6994b7" stroke="#000000" d="M85.4,62.7c-0.2,0.7-0.5,1.4-0.8,2.1c-0.3,0.7-0.6,1.4-0.9,2c-0.6,1.1-2,1.4-3.2,0.8c-1.1-0.7-1.7-2-1.2-2.9 c0.3-0.6,0.5-1.2,0.8-1.8c0.2-0.6,0.6-1.2,0.7-1.8"></path>
          <path fill="#6994b7" stroke="#000000" d="M94.5,65.8c-0.3,0.9-0.7,1.7-1,2.6c-0.4,0.9-0.7,1.7-1.1,2.5c-0.7,1.4-2.3,1.9-3.4,1.3h0 c-1.1-0.7-1.5-2.2-0.9-3.4c0.4-0.8,0.7-1.5,1-2.3c0.3-0.8,0.7-1.5,0.9-2.3"></path>
        </g>
        <g transform="rotate(0.97464 50 50)">
          <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1" begin="-0.15000000000000002s"></animateTransform>
          <path fill="#eeeeee" stroke="#000000" d="M86.9,35.3l-6,2.4c-0.4-1.2-1.1-2.4-1.7-3.5c-0.2-0.5,0.3-1.1,0.9-1C82.3,33.8,84.8,34.4,86.9,35.3z"></path>
          <path fill="#eeeeee" stroke="#000000" d="M87.1,35.3l6-2.4c-0.6-1.7-1.5-3.3-2.3-4.9c-0.3-0.7-1.2-0.6-1.4,0.1C88.8,30.6,88.2,33,87.1,35.3z"></path>
          <path fill="#6994b7" stroke="#000000" d="M82.8,50.1c0-3.4-0.5-6.8-1.6-10c-0.2-0.8-0.4-1.5-0.3-2.3c0.1-0.8,0.4-1.6,0.7-2.4c0.7-1.5,1.9-3.1,3.7-4l0,0 c1.8-0.9,3.7-1.1,5.6-0.3c0.9,0.4,1.7,1,2.4,1.8c0.7,0.8,1.3,1.7,1.7,2.8c1.5,4.6,2.2,9.5,2.3,14.4"></path>
          <path fill="#eeeeee" d="M86.3,50.2l0-0.9l-0.1-0.9l-0.1-1.9c0-0.9,0.2-1.7,0.7-2.3c0.5-0.7,1.3-1.2,2.3-1.4l0.3,0 c0.9-0.2,1.9,0,2.6,0.6c0.7,0.5,1.3,1.4,1.4,2.4l0.2,2.2l0.1,1.1l0,1.1"></path>
          <path fill="#ff9922" d="M93.2,34.6c0.1,0.4-0.3,0.8-0.9,1c-0.6,0.2-1.2,0.1-1.4-0.2c-0.1-0.3,0.3-0.8,0.9-1 C92.4,34.2,93,34.3,93.2,34.6z"></path>
          <path fill="#ff9922" d="M81.9,38.7c0.1,0.3,0.7,0.3,1.3,0.1c0.6-0.2,1-0.6,0.9-0.9c-0.1-0.3-0.7-0.3-1.3-0.1 C82.2,38,81.8,38.4,81.9,38.7z"></path>
          <path fill="#000000" d="M88.5,36.8c0.1,0.3-0.2,0.7-0.6,0.8c-0.5,0.2-0.9,0-1.1-0.3c-0.1-0.3,0.2-0.7,0.6-0.8C87.9,36.3,88.4,36.4,88.5,36.8z"></path>
          <path stroke="#000000" d="M85.9,38.9c0.2,0.6,0.8,0.9,1.4,0.7c0.6-0.2,0.9-0.9,0.6-2.1c0.3,1.2,1,1.7,1.6,1.5c0.6-0.2,0.9-0.8,0.8-1.4"></path>
          <path fill="#6994b7" stroke="#000000" d="M86.8,42.3l0.4,2.2c0.1,0.4,0.1,0.7,0.2,1.1l0.1,1.1c0.1,1.2-0.9,2.3-2.2,2.3c-1.3,0-2.5-0.8-2.5-1.9l-0.1-1 c0-0.3-0.1-0.6-0.2-1l-0.3-1.9"></path>
          <path fill="#6994b7" stroke="#000000" d="M96.2,40.3l0.5,2.7c0.1,0.5,0.2,0.9,0.2,1.4l0.1,1.4c0.1,1.5-0.9,2.8-2.2,2.9h0c-1.3,0-2.5-1.1-2.6-2.4 L92.1,45c0-0.4-0.1-0.8-0.2-1.2l-0.4-2.5"></path>
          <path fill="#000000" d="M91.1,34.1c0.3,0.7,0,1.4-0.7,1.6c-0.6,0.2-1.3-0.1-1.6-0.7c-0.2-0.6,0-1.4,0.7-1.6C90.1,33.1,90.8,33.5,91.1,34.1z"></path>
          <path fill="#000000" d="M85.5,36.3c0.2,0.6-0.1,1.2-0.7,1.5c-0.6,0.2-1.3,0-1.5-0.6C83,36.7,83.4,36,84,35.8C84.6,35.5,85.3,35.7,85.5,36.3z"></path>
        </g>
      </svg>
	{% else %}
  		No Such Icon
  	{% endif %}
{% endmacro %}
```

**`main.twig`**

```twig
  {% import "button.twig" as appButtons %}

  {{ appButtons.Button({
      "label": "Button",
      "variant" : "blue",
      "icon" : "catspinner",
      "class" : ['flex items-center justify-between border-2 px-4 py-2 mb-2']
  }) }}
```

This is the result of the html output generated by the above code snippets.

<CatButton />

In the next post. I'll be explaining an example of a component created using `embed` .

Creating components in Twig

In this tutorial, I'll be going over how I built the typewriter effect on one of my websites with a little bit of JavaScript and some tea in the afternoon.

There are quite a few tutorials, that go about achieving this. There are some very clever ones using Pure CSS and even an NPM package that provides this and much more.

However, I'm not very clever with CSS and I didn't want to add a few KB's to my bundle for a simple thing. Plus it's a bit of practice and some good fun to build one by myself.

### Setup

First we create an HTML file with following bit of code.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typewriter Effect</title>
    <link rel="stylesheet" href="/style.css" />
    <script src="/script.js"></script>
  </head>
  <body>
    <div class="text">
      <span id="typewriter"></span>
      <span class="cursor-blinking">|</span>
    </div>
  </body>
</html>
```

Just a basic template for us to get started with. `#typewriter` is where our text would go and following that we have a blinking cursor. Let's add some CSS to have our cursor blinking.

```css
.text {
  font-size: 4rem;
}

@keyframes blinking {
  0% {
    color: transparent;
  }
  50% {
    color: inherit;
  }
  100% {
    color: transparent;
  }
}

.cursor-blinking {
  animation: 1s blinking step-end infinite;
}
```

This will :

* Render our text, nice and big.
* Register a `keyframe` animation that repeats every **1s** **infinitely** switching text color from `transparent` to `inherit` giving us our **blinking cursor**.

### JavaScripty Bit

I first wrote this code with a bunch of `functions` and later refactored it into a `class` .

```javascript
class TypeWriter {
  constructor(words, element) {
    this.words = words;
    this.element = element;
    this.rafReference = null;
  }
}
```

We will create a `class` **TypeWriter** which would accept an array of **words** and a DOM Node **element**.

Now we need to loop over this **array of words**. So we'll create a method on our class called `loop`.

```javascript
  loop(fn, dt) {
    let raf;
    let dateTime = dt;
    const currentTime = new Date().getTime();
    const delta = currentTime - dateTime;

    if (delta >= 250) {
      dateTime = currentTime;
      fn(raf);
    }

    this.rafReference = requestAnimationFrame(() => {
      this.loop(fn, dateTime);
    });
  }
```

Here, we're calculating `delta` between our `currentTime` and previous `dateTime` and if `delta` is more than `250ms`, we call our **callback function**.

Magic number **250** is the time it takes an average typist to type a character assuming an average person types 50-60 words per minute and an average word is 5-4 characters long. Adjust it as you see fit.

Using `requestAnimationFrame` we can tell the browser to call a function before next repaint. we thus, recursively call `loop` method with `callback` and current `dateTime` as arguments.

We'll now update our constructor :

```javascript
constructor(words, element) {
    this.words = words;
    this.wordIdx = 0; //Current Word Index
    this.charIdx = 0; //Current character Index
    this.charIncrementor = 1; //Increment character by 1
    this.element = element;
    this.delay = 5;//Wait time it takes to type 5 chars at end
    this.currWord = this.words[this.wordIdx]; //Current Word
    this.rafReference = null;
}
```

Next we add an `init` method to initialise animation and `incrementCharacters` to type one character at a time.

```javascript
incrementCharacters() {
    this.charIdx += this.charIncrementor;
}
```

```javascript
animate(word, end) {
    this.element.innerHTML = word.substring(0, end);
}

init(fn) {
    this.loop(() => {
      this.incrementCharacters(); //Increment characterIndex
	  // Type character on the screen at a time.
      this.animate(this.words[this.wordIdx], this.charIdx);
    }, new Date().getTime());
  }
```

We would now like to wait sometime when we're done typing and then delete the characters we've typed on the screen.

```javascript
if (this.charIdx === this.currWord.length + this.delay) {
  //Remove characters now that we've reached end of the word.
  this.charIncrementor = -1;
}
```

We'd like to move onto next word when we're done with our current word. Hence,

```javascript
nextWord() {
    this.wordIdx += 1;
    this.charIncrementor = 1;
    this.currWord = this.words[this.wordIdx];
}

if (this.charIdx === 0) {
    // When all characters of previous word have been hidden.
    this.nextWord();
}
```

When we're done with last word, we'd like to start again in a loop with the first word in array.

```javascript
reset() {
    this.wordIdx = 0;
    this.charIdx = 0;
    this.charIncrementor = 1;
    this.currWord = this.words[this.wordIdx];
}

if (this.wordIdx === this.words.length) {
   //Start again from first word now that we have reached end.
   this.reset();
}
```

When using something like React, we'd like to clear all animations when component unmounts which is how I'm currently using this animation. We'll add a `destroy` function. This is where our `this.rafReference` will be required.

```javascript
destroy() {
    cancelAnimationFrame(this.rafReference);
}
```

Finally we'll update our HTML file.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typewriter Effect</title>
    <link rel="stylesheet" href="/style.css" />
    <script src="/script.js"></script>
  </head>
  <body>
    <div class="text">
      <span id="typewriter"></span>
      <span class="cursor-blinking">|</span>
    </div>
    <script>
      const words = ['Bananas', 'Apples', 'Lorem Ipsum Dolor Sit Amet'];
      const typewriter = document.getElementById('typewriter');
      const writer = new TypeWriter(words, typewriter);
      writer.init();
    </script>
  </body>
</html>
```

<Glitch
embedUrl="https://glitch.com/embed/#!/embed/brass-petalite-dash?path=script.js&previewSize=0"
title="brass-petalite-dash on Glitch"
allow="geolocation; microphone; camera; midi; vr; encrypted-media"
/>

That's it folks!

Hi! I'm Prakhar

Latest Posts

Creating a basic Tab component in React

Creating components in Twig

Creating typewriter effect using JavaScript