useMap

import { useMap } from '@kivora/react';

function KeyValueEditor() {
  const [map, { set, delete: remove, clear }] = useMap([
    ['name', 'Alice'],
    ['role', 'Admin']
  ]);

  return (
    <div>
      {Array.from(map.entries()).map(([key, value]) => (
        <div key={key}>
          <span>{key}: {value}</span>
          <button onClick={() => remove(key)}>Remove</button>
        </div>
      ))}
      <button onClick={() => set('newKey', 'newValue')}>Add Entry</button>
      <button onClick={clear}>Clear All</button>
    </div>
  );
}

const [cache, { set, delete: remove }] = useMap<string, any>();

const fetchData = async (id: string) => {
  if (cache.has(id)) {
    return cache.get(id);
  }
  
  const data = await fetch(`/api/items/${id}`).then(r => r.json());
  set(id, data);
  return data;
};

const invalidate = (id: string) => {
  remove(id);
};

const [preferences, { set }] = useMap([
  ['theme', 'dark'],
  ['fontSize', '16px'],
  ['language', 'en']
]);

return (
  <div>
    <select
      value={preferences.get('theme')}
      onChange={(e) => set('theme', e.target.value)}
    >
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  </div>
);

const [errors, { set, delete: clearError, clear }] = useMap<string, string>();

const validateField = (field: string, value: string) => {
  if (!value) {
    set(field, 'This field is required');
  } else {
    clearError(field);
  }
};

const handleSubmit = () => {
  if (errors.size === 0) {
    // Submit form
    clear();
  }
};

const [config, { set, reset }] = useMap([
  ['apiUrl', 'https://api.example.com'],
  ['timeout', '5000'],
  ['retries', '3']
]);

return (
  <div>
    {Array.from(config.entries()).map(([key, value]) => (
      <input
        key={key}
        placeholder={key}
        value={value}
        onChange={(e) => set(key, e.target.value)}
      />
    ))}
    <button onClick={reset}>Reset to Defaults</button>
  </div>
);