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 here.

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 React official docs.

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.

Platform Login

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.

# create project_name
momen create test21

This command creates a template project and registers a new code component project on the platform, which can contain multiple components. No version is published yet.

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:

1. Click the icon on the left sidebar.

2. 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.

\

About Momen

Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.