validateColor

validateColor(string) returns the original string if it parses as a color, otherwise undefined. It swallows the parse error, so it never throws — handy for guarding user input before passing it on.

Arguments

Name	Type	Description
string	string	The color string to test.

Returns: string | undefined — the original string when it parses as a valid color, otherwise undefined.

Examples

Guarding user input

Filters a raw input value to a valid color before applying it, falling back to a default when the string can't be parsed.

import { render, signal } from 'pota'
import { validateColor } from 'pota/use/color'

function App() {
	const input = signal('#3366ff')

	const color = () => validateColor(input.read()) ?? 'transparent'

	return (
		<div>
			<input
				value={input.read()}
				on:input={e => input.write(e.currentTarget.value)}
			/>
			<div
				style={{
					'background-color': color,
					width: '4rem',
					height: '4rem',
				}}
			/>
		</div>
	)
}

render(App)