> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: NumberType

## Article: NumberType

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/number-type.md

## Article Content:

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

# NumberType

Any numeric value the Wix user sets in the editor. Use it for a field that holds a number, such
as a rating, a count, or a price.

## Component

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

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

At runtime it's a plain JavaScript number, so your code uses it in arithmetic and formatting directly:

```ts
type NumberType = number
```

### Usage

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

::::tabs
:::Consumers
In a component that receives a `NumberType`, use the number directly:

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

function Rating({ rating = 0 }: { rating?: NumberType }) {
  const percent = Math.round((rating / 5) * 100);
  return <span>{percent}% rating</span>;
}
```
:::
:::Producers
When your code produces a `NumberType`, for a context or a function return, assign a number:

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

const rating: NumberType = 4;
```
:::
::::

## Manifest

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

```json
{ "dataType": "number" }
```

### Declaration

Declare a `number` 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 `rating` in a panel. It takes
`dataType`, `displayName`, an optional `defaultValue`, and the options that follow:

```json
{
  "rating": {
    "dataType": "number",
    "displayName": "Product Rating",
    "defaultValue": 4,
    "number": {
      "min": "0",
      "max": "5"
    }
  }
}
```

#### Options

A `number` data property accepts a `number` options object. It constrains the value the Wix user can set.

<PropertyList bordered>
  <Property
    name="min"
    type="string"
    description="The minimum value allowed."
  />
  <Property
    name="max"
    type="string"
    description="The maximum value allowed."
  />
  <Property name="multiplier" type="string">
    The value must be a multiple of this number. For example, `"0.5"` allows 0, 0.5, 1, and
    so on.
  </Property>
</PropertyList>

> **Provide the options as decimal strings, not numbers.** The runtime value is a `number`,
> but `min`, `max`, and `multiplier` are given as strings such as `"0"` and `"5"`.
:::
:::Context-item
Declare it as a context item when your component supplies the number to descendant
components. It takes just `dataType` and `displayName`:

```json
{
  "rating": {
    "dataType": "number",
    "displayName": "Product Rating"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns a number. It takes `dataType`
and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "number",
      "displayName": "Product Rating"
    }
  ],
  "returns": {
    "dataType": "number"
  }
}
```
:::
::::