> For the complete documentation index, see [llms.txt](https://stratox.wazabii.se/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://stratox.wazabii.se/views-components/component-argumnets.md).

# Component argumnets

In Stratox, components can utilize various arguments to manage and manipulate data, handle events, and communicate across different parts of the application. Below is a detailed explanation of each argument type, along with quick examples to demonstrate their usage.

***

### 1. **Props**

Props are objects and data passed to views or components. They are isolated within the view instance, allowing for dynamic updates to specific parts of the page.

**Example:**

```javascript
export default function TextComponent({ props }) {
    props.title = "Initial Title";

    return `
        <h1>${props.title}</h1>
        <p>${props.description}</p>
    `;
}
```

***

### 2. **State**

States are global but scoped to the active route and controller method. Updating a state refreshes the entire page and all nested components.

**Example:**

```javascript
export default function StateExample({ state }) {
    state.setDefault({ counter: 0 });

    setTimeout(() => {
        state.update("counter", state.get("counter") + 1);
    }, 1000);

    return `
        <p>Counter: ${state.get("counter")}</p>
    `;
}
```

***

### 3. **Dispatch**

The dispatcher facilitates making requests (GET, POST, PUT, DELETE) and passing data between routers and controller methods.

**Example:**

```javascript
export default function DispatchExample({ dispatch }) {
    dispatch.navigateTo("#about", { message: "Navigated successfully" });

    return `<p>Check console for navigation dispatch.</p>`;
}
```

***

### 4. **Update**

A shortcut for updating and refreshing a view dynamically.

**Example:**

```javascript
export default function UpdateExample({ props, update }) {
    context.setDefault({ counter: 1 });
    props.title = "Dynamic Update";

    setTimeout(() => {
        update({ title: "Updated Title", counter: ++props.counter });
    }, 2000);

    return `
        <h1>${props.title} ${props.counter}</h1>
    `;
}
```

***

#### 5. **HTTP**

Access server-side data such as HTTP methods or status codes.

**Example:**

```javascript
export default function HTTPExample({ http }) {
    return `
        <p>HTTP Method: ${http.method}</p>
        <p>Status Code: ${http.status}</p>
    `;
}
```

***

#### 6. **Request**

Provides access to dispatched requests via `request.get` and `request.post`.

**Example:**

```javascript
export default function RequestExample({ request }) {
    const title = request.get.get("title") || "Default Title";

    return `
        <h1>${{title}}</h1>
    `;
}
```

***Note:** To safeguard against XSS vulnerabilities, encapsulate potentially injectable data within double curly braces.*&#x20;

***

#### 7. **View**

Represents the main view instance, which can handle events and update content.

**Example:**

```javascript
export default function ViewExample({ view }) {
    const clickHandler = view.bind(() => {
        alert("View clicked!");
    }, false);

    return `
        <button onclick="${clickHandler}">Click Me</button>
    `;
}
```

By adding false in second argumnet in bind you will not update and refresh the view.

***

#### 8. **Context**

Access the Stratox context library to manage settings or default values.

**Example:**

```javascript
export default function ContextExample({ context }) {
    context.setDefault({ title: "Hello World" });

    return `
        <p>Default title: ${props.title}</p>
    `;
}
```

***

#### 9. **Services**

Used to access framework functions or communicate externally.

**Example:**

```javascript
export default function ServicesExample({ services }) {
    const dispatch = services.get("dispatch");
    dispatch.navigateTo("#contact");

    return `<p>Check console for service dispatch.</p>`;
}
```

***

By understanding and utilizing these arguments effectively, you can build robust and dynamic applications with Stratox. Each argument serves a specific purpose, enabling a modular and maintainable approach to component development.