---
title: Use Custom Components
---

# Use Custom Components

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="Item list with descriptions">
      <Cell value="Text of title" footer="Text of description"></Cell>
      <Cell>
        <View>Text of title, slot used</View>
        <View slot="footer">Text of description</View>
      </Cell>
    </Cells>
  </View>
);
```

## Things to note

1. 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 show 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 rows."
        ></ActionSheet>
        </View>
    );
    }
    ```

2. 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>
    );
    ```

3. 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">Remax</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">Remax</View>
        </Badge>
        </View>
    );
    };
    ```