javascript 50 lines · 7 steps

A validated color picker in React

Two uncontrolled inputs share one committed color, validated and synced through a single commit function.

Explained by highlit

React Intermediate uncontrolled-inputs refs validation memoization controlled-state

1import { useCallback, useRef, useState } from 'react';
2 
3export function ColorPicker({ initialColor = '#3b82f6', onCommit }) {
const [committed, setCommitted] = useState(initialColor);
const swatchRef = useRef(null);
const hexRef = useRef(null);
7 
const normalize = (value) => {
  const trimmed = value.trim().replace(/^#?/, '#').toLowerCase();
  return /^#[0-9a-f]{6}$/.test(trimmed) ? trimmed : null;
};
12 
const commit = useCallback(
  (raw) => {
    const next = normalize(raw);
    if (!next || next === committed) {
      if (hexRef.current) hexRef.current.value = committed;
      return;
    }
    setCommitted(next);
    if (swatchRef.current) swatchRef.current.value = next;
    if (hexRef.current) hexRef.current.value = next;
    onCommit?.(next);
  },
  [committed, onCommit],
);
27 
return (
  <div className="color-picker">
    <input
      ref={swatchRef}
      type="color"
      aria-label="Pick color"
      defaultValue={committed}
      onBlur={(e) => commit(e.target.value)}
    />
    <input
      ref={hexRef}
      type="text"
      inputMode="text"
      spellCheck={false}
      maxLength={7}
      defaultValue={committed}
      onBlur={(e) => commit(e.target.value)}
      onKeyDown={(e) => e.key === 'Enter' && e.currentTarget.blur()}
    />
    <span className="color-picker__preview" style={{ backgroundColor: committed }} />
  </div>
);
50}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Uncontrolled inputs with refs let you validate on commit rather than re-rendering on every keystroke.
2A single normalize-and-commit path keeps multiple inputs and derived UI in sync from one source of truth.
3Rejecting invalid or unchanged input by resetting the field's value gives users immediate, honest feedback.

Related explainers

php

<?php
 
namespace App\Services\Checkout;

Validating coupons with Laravel's Pipeline

pipeline chain of responsibility transactions

Intermediate 7 steps

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

php

<?php
 
namespace App\Services;

How a password strength validator works in PHP

validation regular-expressions data-driven

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

rust

use chrono::{Duration, NaiveDate};
 
#[derive(Debug)]
pub struct DateRange {

Parsing and iterating date ranges in Rust

error-handling iterators parsing

Intermediate 7 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);