setClass

Imperatively toggle a single class on an element: a truthy value adds the class, a falsy one removes it. The value may be a reactive accessor, in which case the class follows it. The declarative form is class:myClass={…}. To add or remove many classes at once see setClassList.

JSX's class:myClass= already flows through setClass. Use the function when building nodes imperatively, in a ref-driven effect, or driving a class from outside JSX.

Arguments

name	type	description
node	Element	Target element.
name	string	Class name to toggle.
value	boolean | () => boolean	Truthy adds the class, falsy removes it; functions are tracked reactively.

Returns: void

Examples

Toggle a class from a signal

Passes the signal reader so the selected class follows the signal automatically as the card is clicked.

import { ref, render, setClass, signal } from 'pota'

function App() {
	const card = ref()
	const selected = signal(false)

	return (
		<div>
			<div
				use:ref={card}
				class="card"
				on:click={() => selected.update(s => !s)}
			>
				click me
			</div>
			{() => setClass(card(), 'selected', selected.read())}
		</div>
	)
}

render(App)

Mark the active link

Toggles a class per element from inside the use:connected lifecycle callback, deriving each link's active state from the current location.

import { render, setClass } from 'pota'
import { location } from 'pota/use/location'
import { A } from 'pota/components'
import { css } from 'pota/use/css'

function App() {
	return (
		<ul
			use:connected={menu => {
				for (const link of menu.querySelectorAll('a')) {
					setClass(
						link.parentElement,
						'selected',
						() => location.href() === link.href,
					)
				}
			}}
		>
			{css`
				.selected a {
					color: aqua;
				}
			`}
			<li>
				<A href="#one">one</A>
			</li>
			<li>
				<A href="#two">two</A>
			</li>
			<li>
				<A href="#three">three</A>
			</li>
		</ul>
	)
}

render(App)