# @wazapp/component

Component package expose Wazapp Component which is built on top of React Component. It integrates tracking, app owner (allows to use services) and simplify component API.

> ### Warning!
>
> **Hence the component extends from React Component, do not use any of its API. It may be removed in the future and using it may cause incompatibility with Wazapp components!**

### Example of usage

```typescript
import { ClassComponent } from "@wazapp/component";

export default class MyComponent extends ClassComponent {
  template({ name }) {
    return (
      <h1>Hello, {name}</h1>
    );
  }
}
```

## Class Component

### `props`

`props` exactly like in React Component returns an Object of passed properties to the component. They are automatically tracked by Wazapp.

#### Example of usage

```typescript
import { ClassComponent } from "@wazapp/component";

export default class MyComponent extends ClassComponent {
  template({ name }) {
    return (
      <h1>My name is {name}</h1>
    );
  }
}

export default class MainComponent extends ClassComponent {
  template() {
    return (
      <MyComponent name="Wazapp" />
    );
  }
}
```

### `isUnmounting`

A boolean flag to tell if the component is in the process of unmounting. This is set to true before `willUnmount` is called.

### `isUnmounted`

A boolean to tell if the component has been fully unmounted. This is set to true after `willUnmount` is called.

### `template(props: P, context: this): ReactNode | void`

`template(props)` allows you to define your component template written in JSX. Remember that you are still working in React so things like `className` instead of `class` are still required.

The template can return `ReactNode` or nothing. By default if not defined it will `yield()` component's `children`.

#### Example of usage

```typescript
import { ClassComponent } from "@wazapp/component";

export default class MyComponent extends ClassComponent {
  template({ name }) {
    return (
      <h1>Hello {name}, this is Wazapp component</h1>
    );
  }
}
```

### `yield(...args)`

`yield()` allows you to return component's `children` or in case the `children` is a function, it will allow you to call it with custom arguments.

#### Arguments

* `...args`: `any[]` - your custom arguments that will be used on `children` call (if `children` is a function)

#### Example of usage

```typescript
import { ClassComponent } from "@wazapp/component";

export default class MyComponent extends ClassComponent {
  template() {
    return (
      <h1>Hello, {this.yield('Wazapp')}</h1>
    );
  }
}

export default class MainComponent extends ClassComponent {
  template() {
    return (
      <MyComponent>
        {(name) => (
          <h1>{name}</h1>
        )}
      </MyComponent>
    );
  }
}
```

### `didMount()`

`didMount` is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here.

This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in `willUnmount()`.

#### Example of usage

```typescript
import { ClassComponent } from "@wazapp/component";

export default class MyComponent extends ClassComponent {
  didMount() {
    console.log('Component has been mounted')
  }
}
```

### `didUpdate(prevProps)`

`didUpdate` is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated.

#### Arguments

* `prevProps`: `T<ComponentProps>` - previous component properties

#### Example of usage

```typescript
import { ClassComponent } from "@wazapp/component";

export default class MyComponent extends ClassComponent {
  didUpdate(prevProps) {
    console.log(prevProps.name, this.props.name)
  }
}
```

### `willUnmount()`

`willUnmount` is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in `didMount()`.

#### Example of usage

```typescript
import { ClassComponent } from "@wazapp/component";

export default class MyComponent extends ClassComponent {
  willUnmount() {
    console.log('Component has been unmounted`)
  }
}
```


---

# 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://exelord.gitbook.io/wazapp/packages/component.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.