Antony Holmes


I write most of the posts because this is my site.

That's me posing by the Hudson River for no particular reason.


CEO, CTO, employee #1, all of the above

How to make a simple toggle switch using React.

Let's make a simple UI toggle switch using Preact and SVG. No need for some huge library dependency.



I like to delve into making base UI components using minimal amounts of code and not have to rely on some third party library with an inevitably questionable API.

I like to use Preact for my site since it mostly works as a drop in replacement for React and is smaller and faster, but this also means that some third party React libraries just won't work. Rather than waste time on trying to fix issues, I sometimes find it easier to just create simple components from scratch so I can precisely control the look and feel.

This is a tutorial on making an animated toggle switch using Preact, Tailwind and SVG. You can of course use regular CSS, but I prefer Tailwind's class based approach. This tutorial assumes you have Tailwind and Preact working in your environment.

I work with Typescript (I dislike Javascript's lack of a type checking system so I think TS is an acceptable superset of the language).

# Interfaces

First let's setup some interfaces to describe the parameters the toggle can accept. You may need to modify this to meet your needs. I like to use separate, reusable interfaces, but you could easily combine these into one file.

```typescript
// class-props.ts

export default interface IClassProps {
  className?: string
  style?: {}
}
```

```typescript
// children-props.ts

import IClassProps from "./class-props"

export default interface IChildrenProps extends IClassProps {
  children?: any
}
```

Put everything together to make a toggle props interface. We want to pass if the toggle is selected and supply a call back onClick function so the toggle can pass back a state change to the parent.

```typescript
// toggle-props.ts

import IChildrenProps from "./children-props"

export interface IToggleProps extends IChildrenProps {
  index?: number
  isSelected: boolean
  onClick: (index: number, selected: boolean) => void
}
```

# SCSS/CSS

I like to standardize animation timings so I created a simple global CSS class that applies default tailwind animation properties to a class. I like to use 300ms timings which I find the most aesthetically pleasing. You can see animations move smoothly, but without taking so long that the UI feels sluggish.

If you are using a framework such as Astro/Next/Gatsby, you will probably have a global CSS file for situations Tailwind doesn't cover very well. This is an example of what I do with my global main.scss in Astro.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

... .trans-ani-300 {
  @apply duration-300 ease-in-out;
}
```

# Tailwind

You need to modify your Tailwind config and extend the theme to add a custom translate property for the toggle.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  ...
  theme: {
    extend: {
      ...
      translate: {
        'toggle':'8px'
      },
    },
  },
  plugins: [],
}
```

# The Toggle

The toggle is a simple component containing the SVG and some event handling. The SVG which consists of a rounded rectangle with a circular switch on top. The circular switch has animated movement and the rounded rect changes color depending on whether the toggle is on or not. The toggle is scalable, but the look and feel was based on using Tailwind's w-9 width property.

[class-names](/blog/2023-01-01-class-names) is a custom function I created for merging css class names into a single string and simplifying conditional rendering.

```typescript
// toggle-switch.tsx

import cn from "class-names"
import type IToggleProps from "./toggle-props"

export default function ToggleSwitch({
  index = -1,
  isSelected,
  onClick,
  className,
  children,
}: IToggleProps) {
  return (
    <a
      href="#"
      role="button"
      onClick={() => onClick(index, !isSelected)}
      className={cn(
        "group flex cursor-pointer flex-row items-center justify-between gap-x-4",
        className
      )}
    >
      <div>{children}</div>

      <svg
        viewBox="0 0 24 16"
        xmlns="http://www.w3.org/2000/svg"
        className="w-9"
      >
        <rect
          width="24"
          height="16"
          rx="8"
          className={cn("trans-ani-300 transition-colors", [
            isSelected,
            "fill-blue-600",
            "fill-slate-200 group-hover:fill-slate-300",
          ])}
        />
        <circle
          cx="8"
          cy="8"
          r="7"
          className={cn("trans-ani-300 fill-white transition-transform", [
            isSelected,
            "translate-x-toggle",
          ])}
        />
      </svg>
    </a>
  )
}
```

Creating a React toggle switch using SVG

How to simplify conditional class name strings.

Simplify class name strings without external libraries.



Using a class based approach for css, such as Tailwind can often mean long strings of class names. I created
this simple function to concatenate and deal with conditional renderings. Instead of writing strings such as `${x ? "y" : "z"}`
you can supply a list of strings or an array beginning with a boolean expression which can deal with conditionals.

```typescript
// class-names.ts

function _clean(cn: string) {
  // replace multi spaces globally and ignore new lines
  return cn.replace(/(\s+|\r\n|\n|\r)/gm, " ").trim()
}

type CSSClass =
  | string
  | CSSClass[]
  | [boolean, CSSClass]
  | [boolean, CSSClass, CSSClass]
  | undefined

function _cn(arg: CSSClass, classes: string[]) {
  if (!arg) {
    return
  }

  if (Array.isArray(arg)) {
    if (arg.length > 0) {
      if (typeof arg[0] === "boolean") {
        switch (arg.length) {
          case 1:
            // nonsense so ignore
            break
          case 2:
            // only render if true
            if (arg[0]) {
              _cn(arg[1], classes)
            }
            break
          default:
            // conditionally render
            arg[0] ? _cn(arg[1], classes) : _cn(arg[2], classes)
            break
        }
      } else {
        arg.forEach(arg => _cn(<CSSClass>arg, classes))
      }
    }
  } else {
    const argType = typeof arg

    if (argType === "string" || argType === "number") {
      classes.push(arg)
    }
  }
}

/**
 * Concatenates strings of class names together to form a class name string.
 * Useful for breaking up long tailwind class strings.
 * Also adds conditional rendering. [condition, 'classes'] will only add the
 * classes if condition is true. [condition, 'classes1', 'classes2'] adds
 * classes1 or classes2 conditionally. Also supports recursive conditionals.
 * [condition1, [condition2, 'classes1', 'classes2'], 'classes3'].
 *
 * @param args string or array of strings of classnames. Also supports condition c
 * @returns a space separated string of class names.
 */
export function cn(...args: CSSClass[]): string {
  const classes: string[] = []

  _cn(args, classes)

  // join all the pieces into one then split on space
  // and remove duplicates
  return _clean(classes.join(" "))
}

/**
 * Concatenates strings of class names together to form a class name string.
 * Useful for breaking up long tailwind class strings. This variant keeps
 * only unique names in the order they appear.
 * Also adds conditional rendering. [condition, 'classes'] will only add the
 * classes if condition is true. [condition, 'classes1', 'classes2'] adds
 * classes1 or classes2 conditionally. Also supports recursive conditionals.
 * [condition1, [condition2, 'classes1', 'classes2'], 'classes3'].
 *
 * @param args string or array of strings of classnames. Also supports condition c
 * @returns a space separated string of class names.
 */
export function cnu(...args: CSSClass[]): string {
  const used = new Set<string>()

  const classes: string[] = []

  _cn(args, classes)

  // join all the pieces into one then split on space
  // and remove duplicates
  return _clean(
    classes
      .filter(c => {
        // keep track of tokens already seen
        const ret = !used.has(c) && c !== "" && c !== " "
        used.add(c)
        return ret
      })
      .join(" ")
  )
}

export default cn
```

In the example the arrays containing 3 elements where the first element is a boolean. such as `[show2, "p4", "p5"]` will conditionally add class `p4` or `p5` depending on whether `show2` is `true`. You can nest these expressions to create more complex one line conditional expressions that do not require cumbersome string interpolations, for example `[show, [show2, "p4", "p5"], "p6"]`, if `show` is `true`, then add class `p4` or `p5` depending on whether `show2` is `true`.

```typescript
// component.tsx

import cn from "../lib/class-names"

...
const show = true
const show2 = true
const show3 = true


return(<div className={cn("p1 p2", "p3", [show, [show2, "p4", "p5"], "p6"], [show3, "p7"])}>)
```

Creating a React toggle switch using SVG

Simplifying class name strings