Code Component

PreviousPromoting Momen NextCollaboration

Last updated 1 day ago

Code Component

Introduction

Enhance your applications by adding custom-built React components. These components can enable dynamic forms with live validation, data-driven charts, advanced animations, transitions, interactive maps, and data visualizations, expanding the range of interactive functionality. Check out the showcase of data visualization .

Prerequisites

Before you begin, ensure you meet the following prerequisites:

Working knowledge of Momen
Basic front-end development experience
Familiarity with TypeScript
Ability to develop customized React components

For users new to React, consider exploring resources such as .

Getting Started

To begin, install Momen globally for local development. This setup provides the command alias zvm for simplified access to platform commands.

# Install globally
npm i -g momen-cli

To confirm that Momen is installed correctly, run zvm --version.

Use the following command to sign in from your project’s working directory. Replace username and password with your actual credentials.

# Sign in with your username and password
momen signin username password

Project Creation

Run the command below to create a new project.

# Create a new project
momen create project_name

This command generates a template project and registers it as a new code component project within Momen. While multiple components can be added, note that the initial setup doesn’t publish a version yet, so further steps are required to release it.

Editing Code

To start developing custom components, navigate to your project directory and install dependencies:

# Navigate to the project directory and install dependencies
cd project_name
npm install

A typical code component library project has the following structure:

In this step, you’ll define and set up custom components in your project. Each custom component requires a dedicated folder under src/components with the following files:
- index.ts: for exporting the component
- [ComponentName].tsx: for component logic
Each component file must export four interfaces for property types:
- [ComponentName]PropData: Defines data types received from the host project (supported types: string, number, boolean)
- [ComponentName]StateData: Declares component states exposed to the host, with type State from the zvm-code-context package
- [ComponentName]Event: Declares internal events with properties typed as EventHandler from zvm-code-context
- [ComponentName]Prop: Combines the above three interfaces as propData, propState, and event
Expose newly created components in src/components/index.ts.

Refer to the template’s example code for guidance. Follow the conventions strictly for proper component and declaration recognition.

Publishing the Project

To publish your project, update the version field in package.json to align with npm versioning guidelines. For example, follow the semantic versioning format like 1.0.0.

Then, run the following command within the project directory:

# Publish the project
momen publish

After publishing, the new code component library will be available for configuration in any project on Momen.

Importing Code Components

To add your custom code component to a no-code project:

Click the icon on the left sidebar.
Select your newly published component project in the pop-up window.

Once added, the component will appear at the bottom of the left sidebar.

Database Synchronization

After configuring or modifying a component, sync the database or preview to ensure it functions at runtime. To do this, click the database sync icon (located in the upper left of the interface).

Configuring Component Properties

Properties are parsed according to their declared types, so it’s essential to follow naming conventions and structure precisely to ensure compatibility with Momen.