#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 and weui.

#Example

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

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

   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

   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

   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

   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

   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>
   );
   };