Output Function

The output function allows us to expose a function from the component, which can then be triggered from the parent component using callOutputFn.

Syntax

The output function has three arguments: the first is the this context of the component, the second is the output function name, and the third is the callback. The output function key is the property key that will be used to trigger the output function from outside the component. The callback function will run once the output function is triggered.

The callOutputFn function takes three arguments: the first is the child component that contains the outputted function; the second is the name of the output function; and the third is an optional argument that accepts an array, which will serve as the parameters of the outputted callback from the child component.

Example.

Child component

import { output } from '@monster-js/core';

export function Child() {
    output(this, 'greet', (name: string) => {
        return 'Hello ' + name;
    });
    return <h1>Child component</h1>
}

Parent component

import { callOutputFn } from '@monster-js/core';

export function Parent() {

    let childRef: any;

    const clickMe = () => {
        const message = callOutputFn(childRef, 'greet', ['John']);
        console.log(message);
    }

    return <div>
        <button on:click={clickMe}>Click Me</button>
        <Child v:ref={childRef}></Child>
    </div>
}

Typing

We can also provide generic types for our output function. This will help developers easily identify which properties they can use, and it will also assist with type checking.

Example.

Child component

import { output } from '@monster-js/core';

export interface ChildInterface {
    greet: (...args: any[]) => string;
}

export function Child() {
    output<ChildInterface>(this, 'greet', (name: string) => {
        return 'Hello ' + name;
    });
    return <h1>Child component</h1>
}

Parent component

import { callOutputFn } from '@monster-js/core';
import { Child, ChildInterface } from './child.component';

export function Parent() {

    let childRef: any;

    const clickMe = () => {
        const message = callOutputFn<ChildInterface>(childRef, 'greet', ['John']);
        console.log(message);
    }

    return <div>
        <button on:click={clickMe}>Click Me</button>
        <Child v:ref={childRef}></Child>
    </div>
}

This will ensure that the output function exists in ChildInterface.