English | 简体中文

@ray-js/gesture

Tuya Ray 手势库

Installation

$ npm install @ray-js/gesture
# or
$ yarn add @ray-js/gesture

Usage

Class Component

import React from 'react';
import { View, Text } from '@ray-js/components';
import Gesture from '@ray-js/gesture';

export default () => (
  <Gesture
    onTap={event => {
      console.log('onTap', event);
    }}
  >
    <View />
  </Gesture>
);

useGesture

import React from 'react';
import { View, Text } from '@ray-js/components';
import { useGesture } from '@ray-js/gesture';

export default () => {
  const gesture = useGesture({
    onTap: event => {
      console.log('onTap', event);
    },
  });
  <View {...gesture} />;
};

useRect

import React from 'react';
import { View, Text } from '@ray-js/components';
import useRect from '@ray-js/gesture';

export default props => {
  const [id, ref, rect] = useRect();
  console.log(rect.width, rect.height); // 150 150
  return <View ref={ref} id={id} style={{ width: '150px', height: '150px' }} />;
};

References

• @use-gesture
• Finger.Taro
• https://github.com/AlloyTeam/AlloyFinger
• rc-gesture