# useProp

useProp allows you to work with a prop(property) of the webcomponent in a similar way to useState.

## Syntax

```javascript
const [value, setValue] = useProp(myProp);
```

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

{% tabs %}
{% tab title="Javascript" %}

```javascript
import { useProp } from "atomico";

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

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

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

{% endtab %}

{% tab title="Typescript" %}

```typescript
import { useProp } from "atomico";

function useCounter(prop) {
  //                                 👇 type for prop
  const [value, setValue] = useProp<number>(prop);
  return {
    value,
    increment: () => setValue((value) => value + 1),
    decrement: () => setValue((value) => value - 1),
  };
}

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

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

{% endtab %}
{% endtabs %}

Where:

1. **useCounter is a customHook** and that it can work with any property of the webcomponent of type Number.
2. useCounter returns 2 methods increment and decrement that modify the value of the prop.
3. **useCounter can be instantiated multiple times** for different properties.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atomico.gitbook.io/doc/api/hooks/useprop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.