version: "1.0.2" name: react-localstorage-keyboard-nav description: Create React components with localStorage persistence and keyboard navigation support

React Components with localStorage Persistence & Keyboard Navigation

This skill guides you through creating reusable React components that:

1. Persist state to localStorage
2. Implement keyboard navigation
3. Follow modal/command palette patterns

Core Pattern

// 1. Define localStorage hooks
const useLocalStorage = (key: string, initialValue: any) => {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
};
// 2. Implement keyboard navigation
const useKeyboardNav = (items: any[], onSelect: (item: any) => void) => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      setSelectedIndex(prev => Math.min(prev + 1, items.length - 1));
    } else if (e.key === 'ArrowUp') {
      setSelectedIndex(prev => Math.max(prev - 1, 0));
    } else if (e.key === 'Enter') {
      onSelect(items[selectedIndex]);
    }
  };
  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [selectedIndex, items]);
  return { selectedIndex };
};

Implementation Steps

1. Create Component Scaffolding

``bash mkdir -p src/components/{Modal,CommandPalette} touch src/components/Modal/SettingsModal.tsx touch src/components/CommandPalette/CommandPalette.tsx ``

1. Implement localStorage Persistence

``typescript // SettingsModal.tsx const SettingsModal = () => { const [settings, setSettings] = useLocalStorage('app-settings', DEFAULT_SETTINGS); // ... modal implementation }; ``

1. Add Keyboard Navigation

``typescript // CommandPalette.tsx const CommandPalette = ({ commands }) => { const { selectedIndex } = useKeyboardNav(commands, (cmd) => cmd.action()); // ... render commands with highlighted selectedIndex }; ``

1. Export Components

``typescript // src/components/index.ts export * from './Modal/SettingsModal'; export * from './CommandPalette/CommandPalette'; ``

Best Practices

• Create a settings-keys.ts file to manage localStorage keys
• Use TypeScript interfaces for settings/commands
• Implement proper focus management for accessibility