> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Using Functions as Props

**Note:** Currently, this feature is only available for our React renderer.

## Overview

This guide explains how to use callback functions and handlers within your prop configurations. Sometimes, you may need to pass a function into a component. This can be accomplished by using function props, allowing your components to handle events and execute custom logic efficiently.

#### Step 1: Add the function prop

The first step in the process involves adding the function prop to the components spec.

#### Step 2: Optionally, configure the function prop further

You can make this prop required, provide a default value, and provide a TypeScript Type.

#### Step 3: Click the "Save Changes" button and begin using functions as props!

The last step is to save the changes. Click the blue "Save Changes" button and begin using functions as props.

![Screenshot 2024-07-25 at 10.40.16 AM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/85ade6d10aba5142622dd067b2973f2678e9c202ab2f19ff559f9d6057912548/docs/assets/images/e37debf3-screenshot-2024-07-25-at-104016-am-6ewyxxc5fzpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211204Z&X-Amz-Expires=604800&X-Amz-Signature=f77ea09e96748d7cfe2378106078a8a73393c18b146aa4e421b53418584dc9e3&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

***

## Conclusion

Pulling it all together we can now use functions as props 🎉

![Screenshot 2024-07-25 at 10.44.35 AM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/d99b3795f9783d556024c8ebc1fb577c1d76a568436d14b62aefc3240472e889/docs/assets/images/fbe50396-screenshot-2024-07-25-at-104435-am-igvfduzlhupng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211204Z&X-Amz-Expires=604800&X-Amz-Signature=31cce7829f0b6877c49683537465fc1ab7454ef82286bdd62be7579afc6ffe5b&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)