useState()

export const useState = initialState => useReducer((_, v) => v, initialState);

import { x, useState } from '@zserge/o';

const Counter = () => {
  const [count, setCount] = useState(0);
  
  return x`
    <div>
      <p>Count: ${count}</p>
      <button onclick=${() => setCount(count + 1)}>Increment</button>
    </div>
  `;
};

import { x, useState } from '@zserge/o';

const NameInput = () => {
  const [name, setName] = useState('');
  
  return x`
    <div>
      <input 
        type="text" 
        value=${name}
        oninput=${(e) => setName(e.target.value)}
      />
      <p>Hello, ${name}!</p>
    </div>
  `;
};

import { x, useState } from '@zserge/o';

const UserForm = () => {
  const [user, setUser] = useState({ name: '', email: '' });
  
  const updateName = (name) => setUser({ ...user, name });
  const updateEmail = (email) => setUser({ ...user, email });
  
  return x`
    <div>
      <input 
        type="text" 
        value=${user.name}
        oninput=${(e) => updateName(e.target.value)}
        placeholder="Name"
      />
      <input 
        type="email" 
        value=${user.email}
        oninput=${(e) => updateEmail(e.target.value)}
        placeholder="Email"
      />
      <p>Name: ${user.name}, Email: ${user.email}</p>
    </div>
  `;
};

import { x, useState } from '@zserge/o';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  
  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, input]);
      setInput('');
    }
  };
  
  return x`
    <div>
      <input 
        type="text"
        value=${input}
        oninput=${(e) => setInput(e.target.value)}
      />
      <button onclick=${addTodo}>Add</button>
      <ul>
        ${todos.map(todo => x`<li>${todo}</li>`)}
      </ul>
    </div>
  `;
};

import { x, useState } from '@zserge/o';

const Toggle = () => {
  const [isOn, setIsOn] = useState(false);
  
  return x`
    <div>
      <button onclick=${() => setIsOn(!isOn)}>
        ${isOn ? 'ON' : 'OFF'}
      </button>
      ${isOn && x`<p>The toggle is on!</p>`}
    </div>
  `;
};