Skip to content

Instantly share code, notes, and snippets.

@UpperCod
Last active April 15, 2021 04:10
Show Gist options
  • Save UpperCod/eac614b763521c65c75989175693f8d0 to your computer and use it in GitHub Desktop.
Save UpperCod/eac614b763521c65c75989175693f8d0 to your computer and use it in GitHub Desktop.
Functional behavior
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 },
};
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),
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment