Functional behavior

component-counter.jsx

import { useCounter } from "./use-counter.js";

function component() {
  const count = useCounter("count");
  return (
    <host>
      <button onclick={count.increment}>+</button>
      <strong>{count.value}</strong>
      <button onclick={count.decrement}>-</button>
    </host>
  );
}

component.props = {
  count: { type: Number, value: 0 },
};

use-counter.jsx

import { useProp } from "atomico";

const increment = (value) => value + 1;
const decrement = (value) => value - 1;

export function useCounter(prop) {
  const [value, setValue] = useProp(prop);
  return {
    value,
    increment: () => setValue(increment),
    decrement: () => setValue(decrement),
  };
}