Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# Regex

A regular expression pattern supplied by the Wix user, stored as a string. Use it for a
field that validates other input against a pattern, such as a code format the Wix user defines
themselves. The value is the source text of a regular expression, for example
`'^[A-Z]{2}\d{3}$'`.

## Component

In your component code, import the `Regex` type from `@wix/editor-react-types`:

```ts
import type { Regex } from '@wix/editor-react-types';
```

At runtime it's a plain string:

```ts
type Regex = string
```

### Usage

Your code either consumes a value of type `Regex` or produces one:

::::tabs
:::Consumers
In a component that receives a `Regex`, compile it into a `RegExp` and test
input against it:

```tsx
import type { Regex } from '@wix/editor-react-types';

function CodeField({ validationPattern }: { validationPattern?: Regex }) {
  const isValid = (value: string) =>
    validationPattern ? new RegExp(validationPattern).test(value) : true;

  return <input onBlur={(event) => isValid(event.target.value)} />;
}
```
:::
:::Producers
When your code produces a `Regex`, for a context or a function return, assign
the source text of a regular expression:

```ts
import type { Regex } from '@wix/editor-react-types';

const validationPattern: Regex = '^[A-Z]{2}\\d{3}$';
```
:::
::::

## Manifest

In your manifest, declare the field with the `regex` dataType:

```json
{ "dataType": "regex" }
```

### Declaration

Declare a `regex` field in one of these ways, depending on where the value comes from:

::::tabs
:::Data-property
Declare it as a data property when the Wix user should set the pattern in a panel. It takes
`dataType`, `displayName`, an optional `defaultValue`, and the optional text options that
follow:

```json
{
  "validationPattern": {
    "dataType": "regex",
    "displayName": "Validation Pattern",
    "defaultValue": "^[A-Z]{2}\\d{3}$",
    "text": {
      "maxLength": 100
    }
  }
}
```

#### Options

In the data property role, a regex field accepts the same options as the `Text` type,
grouped under a `text` key. These constrain the pattern string the Wix user types.

<PropertyList bordered>
  <Property
    name="minLength"
    description="The minimum number of characters allowed."
  />
  <Property
    name="maxLength"
    description="The maximum number of characters allowed."
  />
  <Property
    name="pattern"
    description="A regex that the typed value must match. Because a regex field's value is itself a regular expression, this constrains the shape of that regex. The pattern is capped at 100 characters."
  />
</PropertyList>
:::
:::Context-item
Declare it as a context item when your component supplies the pattern to descendant
components. It takes `dataType` and `displayName`:

```json
{
  "validationPattern": {
    "dataType": "regex",
    "displayName": "Validation Pattern"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns a pattern. It takes
`dataType` and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "regex",
      "displayName": "Validation Pattern"
    }
  ],
  "returns": {
    "dataType": "regex"
  }
}
```
:::
::::