---
title: Utils
---

# Utils

## RatioUtils

**Before:**

```js
import { Utils } from "tuya-panel-kit";
const { convertX } = Utils.RatioUtils;

// Width of a component in the design draft is 13
width = convertX(13); // The final width of the component on the current device
```

**Now:**

```css
.content {
  width: 26rpx;
}
```

Since MiniApp natively support the CSS environment, you can use the `rpx` unit for adaptation without needing to use `convertX` for conversion. For more details, see [TYSS Reference - rpx Unit](/en/miniapp/develop/miniapp/framework/tyss#rpx-unit).

## ColorUtils

**Before:**

```js
import { Utils } from "tuya-panel-kit";
const { hsvToRgb } = Utils.ColorUtils;

hsvToRgb(h, s, v); 
// Example:
hsvToRgb(0, 1, 1);
```

**Now:**

```js
import { utils } from '@ray-js/panel-sdk';
const { hsv2rgb } = utils;
 
hsv2rgb(h, s, v);
// Example:
hsv2rgb(0, 100, 100);
```

For more details, see [Utility Methods - Color](/en/miniapp/solution-panel/ability/common/utils/color).

## TemperatureUtils

**Before:**

```js
import { Utils } from "tuya-panel-kit";
const { f2c } = Utils.TemperatureUtils;

f2c(fah);
// Example:
f2c(100);
```

**Now:**

```js
import { utils } from '@ray-js/panel-sdk';
const { f2c } = utils;
 
f2c(fah);
// Example:
f2c(100);
```

For more details, see [Utility Methods - Temperature](/en/miniapp/solution-panel/ability/common/utils/temperature).

## JsonUtils

**Before:**

```js
import { Utils } from "tuya-panel-kit";
const { parseJSON } = Utils.JsonUtils;

parseJSON(str);
//Example：
parseJSON("{a:1, b:2}");  
```

**Now:**

```js
import { utils } from '@ray-js/panel-sdk';
const { parseJSON } = utils;
 
parseJSON(str);
//Example：
parseJSON('{a:1, b:2}');
```

For more details, see [Utility Methods - JSON](/en/miniapp/solution-panel/ability/common/utils/json).

## CoreUtils

**Before:**

```js
import { Utils } from "tuya-panel-kit";
const { toFixed } = Utils.CoreUtils;

toFixed(str, num);
// Example:
toFixed("111", 5); 
toFixed("3456111", 5);
```

**Now:**

```js
import { utils } from '@ray-js/panel-sdk';
const { toFixed } = utils;
 
toFixed(str, num);
// Example:
toFixed('111', 5);
toFixed('3456111', 5);
```

For more details, see [Utility Methods - Common](/en/miniapp/solution-panel/ability/common/utils/core).

## StringUtils

**Before:**

```js
import { Utils } from "tuya-panel-kit";
const { hexStringToNumber } = Utils.StringUtils;

hexStringToNumber(bits);
// Example:
hexStringToNumber("AD03");
```

**Now:**

```js
import { utils } from '@ray-js/panel-sdk';
const { hexStringToNumber } = utils;
 
hexStringToNumber(bits);
// Example:
hexStringToNumber("AD03");
```

For more details, see [Utility Methods - String](/en/miniapp/solution-panel/ability/common/utils/string).

## TimeUtils

**Before:**

```js
import { Utils } from "tuya-panel-kit";
const { parseSecond } = Utils.TimeUtils;

parseSecond(second, num);
// Example
parseSecond(111); 
parseSecond(3333333);
```

**Now:**

```js
import { utils } from '@ray-js/panel-sdk';
const { parseSecond } = utils;
 
parseSecond(second, num);
// Example
parseSecond(111);
parseSecond(3333333);
```

For more details, see [Utility Methods - Time](/en/miniapp/solution-panel/ability/common/utils/time).

## NumberUtils

**Before:**

```js
import { Utils } from "tuya-panel-kit";
const { toFixedString } = Utils.NumberUtils;

toFixedString(value, length);
// Example:
toFixedString(111, 5); 
toFixedString(3456111, 5);
```

**Now:**

```js
import { utils } from '@ray-js/panel-sdk';
const { toFixedString } = utils;
 
toFixedString(value, length);
// Example:
toFixedString(111, 5);
toFixedString(3456111, 5);
```

For more details, see [Utility Methods - Number](/en/miniapp/solution-panel/ability/common/utils/number).