Logo
  1. Docs
  2. Build a Weaverse Hydrogen Theme

Weaverse Hydrogen Component

Published on Oct 11, 2023, updated a month ago

Anatomy

A Weaverse Component file typically comprises these parts:

  1. Component Definition: Where the markup of the component is crafted.

  2. Type Definitions: The contract to which the component must adhere, thanks to TypeScript 💚.

  3. Component Schema: Configurations ensuring smooth interaction with Weaverse Studio.

  4. Loaders: Mechanisms tasked with data retrieval.

An abbreviated glance at each part:

WEAVERSE_EMBEDED_CODE

Guides

Defining The Component

The visual representation of your component comes to life in this step. Here are a few key principles to note:

  1. Always use forwardRef to define your component.

  2. Ensure the component accepts and forwards both ref and the rest (...rest) of the props. This guarantees proper rendering and interaction within Weaverse Studio.

Example:

WEAVERSE_EMBEDED_CODE

Registering the Component

Remember to include your component in the main components export. This allows it to be recognized and usable within Weaverse Studio:

WEAVERSE_EMBEDED_CODE

Defining Types

Types enhance the predictability of your component. Once defined, you can utilize these types in your component, ensuring expected data shapes and enhancing stability.

Example:

WEAVERSE_EMBEDED_CODE

Defining Schema

The schema is an object that assists in determining how your component is presented and interacted with within Weaverse Studio:

WEAVERSE_EMBEDED_CODE

For further details, delve into the Component Schema article.

Input Settings in Schema

The inspector key within your schema provides configurations to allow non-developers to modify your component within Weaverse Studio:

WEAVERSE_EMBEDED_CODE

Explore the crafting of settings in the Input Settings article.

The Power of Loader Function

Component's loader function have the unique ability to run on the server-side ğŸ˜Ž, a standout feature in Weaverse, allowing your components to dynamically respond to data:

WEAVERSE_EMBEDED_CODE

Unlock the potential of loaders with the Data Fetching & Caching article.

Conclusion

Components, with their multifaceted capabilities, are vital in crafting a powerful, efficient, and user-friendly theme on Weaverse.

To dive deeper into how component schemas work, check out our next article on Component Schema.

Was this article helpful?