---
title: Hybrid Development
---

# Hybrid Development

You can use custom components of Panel MiniApp in the Ray architecture. Native UI component libraries are supported, for example, [miniapp-components-plus](https://www.npmjs.com/package/@tuya-miniapp/miniapp-components-plus) and [weui](https://github.com/wechat-miniprogram/weui-miniprogram).

## Example

The following example shows the extension component library of Smart MiniApp, `miniapp-components-plus`:

```js
import * as React from 'react';
import { View } from '@ray-js/ray';
import Cells from '@tuya-miniapp/miniapp-components-plus/cells';
import Cell from '@tuya-miniapp/miniapp-components-plus/cell';

export default () => (
  <View>
    <Cells title="List item with description">
      <Cell value="Title" footer="Description"></Cell>
      <Cell>
        <View>Title (with slot)</View>
        <View slot="footer">Description</View>
      </Cell>
    </Cells>
  </View>
);
```

## Things to note

### Use an event that starts with `bind` as the event of a custom component

#### Example

```js
import React from 'react';
import { Button, View } from '@ray-js/ray';
import ActionSheet from '@tuya-miniapp/miniapp-components-plus/actionSheet';
export default function Demo() {
  const [isShowAtionSheet, setIsShowAtionSheet] = React.useState(false);
  const groups = [
    { text: 'Sample menu', value: 1 },
    { text: 'Sample menu', value: 2 },
    { text: 'Sample menu', type: 'warn', value: 3 },
  ];
  return (
    <View>
      <Button
        onClick={() => {
          setIsShowAtionSheet(true);
        }}
      >
        Tap to bring up ActionSheet
      </Button>
      <ActionSheet
        bindactiontap={(e) => {
          console.log('Tap the button of ActionSheet', e);
        }}
        bindclose={(e) => {
          console.log('Tap to close');
          setIsShowAtionSheet(false);
        }}
        show={isShowAtionSheet}
        actions={groups}
        title="This is a title to be displayed in one or two lines."
      ></ActionSheet>
    </View>
  );
}
```

### For the component with `slot`, the outermost layer of `slot` must be the `View` component

#### Wrong example

```js
import React from 'react';
import { Text, View } from '@ray-js/ray';
import Badge from '@tuya-miniapp/miniapp-components-plus/badge';
export default () => (
  <View>
    <Badge>
      <Text slot="inner">Ray</Text>
    </Badge>
  </View>
);
```

#### Correct example

```js
import React from 'react';
import { View } from '@ray-js/ray';
import Badge from '@tuya-miniapp/miniapp-components-plus/badge';
export default () => (
  <View>
    <Badge>
      <View slot="inner">Ray</View>
    </Badge>
  </View>
);
```

### Spread attributes cannot be used in custom components

#### Wrong example

```js
import React from 'react';
import { View } from '@ray-js/ray';
import Badge from '@tuya-miniapp/miniapp-components-plus/badge';
export default () => {
  const badgeProps = {
    text: 1,
  };
  return (
    <View>
      <Badge {...badgeProps}>
        <View slot="inner">ray</View>
      </Badge>
    </View>
  );
};
```

#### Correct example

```js
import React from 'react';
import { View } from '@ray-js/ray';
import Badge from '@tuya-miniapp/miniapp-components-plus/badge';
export default () => {
  return (
    <View>
      <Badge text={1}>
        <View slot="inner">ray</View>
      </Badge>
    </View>
  );
};
```