useProp
Reactivity in the scope of the webcomponent without the use of context(this)
useProp allows you to work with a prop(property) of the webcomponent in a similar way to useState.

Syntax

1
const [value, setValue] = useProp(myProp);
Copied!
Where :
  • value: Current value of the prop.
  • setValue: Callback to update the value of the prop.
  • myProp: string, defines the name of the prop to be used by the hook.

Example

1
import { useProp } from "atomico";
2
3
function useCounter(prop) {
4
const [value, setValue] = useProp(prop);
5
return {
6
value,
7
increment: () => setValue((value) => value + 1),
8
decrement: () => setValue((value) => value - 1),
9
};
10
}
11
12
function component() {
13
const counter = useCounter("value");
14
return (
15
<host>
16
<button onClick={counter.increment}>+</button>
17
<strong>{counter.value}</strong>
18
<button onClick={counter.decrement}>-</button>
19
</host>
20
);
21
}
22
23
component.props = {
24
value: { type: Number, value: 0 },
25
};
Copied!
Where:
  1. 1.
    useCounter is a customHook and that it can work with any property of the webcomponent of type Number.
  2. 2.
    useCounter returns 2 methods increment and decrement that modify the value of the prop.
  3. 3.
    useCounter can be instantiated multiple times for different properties.
Last modified 3mo ago
Copy link
Edit on GitHub