Type Values in a Component

At runtime your code works with editor types as TypeScript values from the @wix/editor-react-types package. This article covers what those types look like, how a value reaches your code, and how you expose one.

Type shapes

Import the type you need and use it to type a value your code works with, whether it's a prop a component receives, a value exposed through a context, or a value a function returns. The types take three shapes:

• A primitive type is a plain string, number, or boolean. Several types are aliases for a built-in primitive. For example, Text, Email, and Guid are all string at runtime. The distinct name signals how the value is used and how the manifest constrains it, not a different runtime shape.
• An object type is a set of named fields, such as Image or Link.
• An array type is a list whose items all share one shape, such as MenuItems, a list of MenuItem objects.

How values arrive and are exposed

Every value has two sides at runtime. Code that receives a value is a consumer of it, and code that provides a value is a producer of it. The same component or function is often both, consuming some values and producing others. Which side applies depends on where you declared the type.

• In an Editor React Component (ERC), each data property you declare arrives as a prop the component consumes. An ERC can also be a producer, exposing a value to other components through a context.
• In a context provider, each context item is a value your code produces and exposes for other components to consume by binding to it. Because your code produces it, a context item carries no authoring options, unlike a data property. The provider also consumes its own data properties, which arrive as props the same as on an ERC.
• In a function library, your function consumes each parameter you declare and produces the return you declare.

A type page's Component section shows how to use the type in code, as both a consumer and a producer where applicable.