@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

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

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

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

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

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

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

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

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