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 onchildrencall (ifchildrenis 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