Comment on page
@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!
import { ClassComponent } from "@wazapp/component";
export default class MyComponent extends ClassComponent {
template({ name }) {
return (
<h1>Hello, {name}</h1>
);
}
}
props
exactly like in React Component returns an Object of passed properties to the component. They are automatically tracked by Wazapp.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" />
);
}
}
A boolean flag to tell if the component is in the process of unmounting. This is set to true before
willUnmount
is called.A boolean to tell if the component has been fully unmounted. This is set to true after
willUnmount
is called.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
.import { ClassComponent } from "@wazapp/component";
export default class MyComponent extends ClassComponent {
template({ name }) {
return (
<h1>Hello {name}, this is Wazapp component</h1>
);
}
}
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....args
:any[]
- your custom arguments that will be used onchildren
call (ifchildren
is a function)
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
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()
.import { ClassComponent } from "@wazapp/component";
export default class MyComponent extends ClassComponent {
didMount() {
console.log('Component has been mounted')
}
}
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.
prevProps
:T<ComponentProps>
- previous component properties
import { ClassComponent } from "@wazapp/component";
export default class MyComponent extends ClassComponent {
didUpdate(prevProps) {
console.log(prevProps.name, this.props.name)
}
}
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()
.import { ClassComponent } from "@wazapp/component";
export default class MyComponent extends ClassComponent {
willUnmount() {
console.log('Component has been unmounted`)
}
}
Last modified 3yr ago