Encapsulate a simple component from scratch using TS plus hooks

Recently, I just took over React project. Encapsulating a component is the most basic part of learning React, so let’s write a simple React component.

1. Interface Defines the interface

Let’s start with the component effect we want to implement, as shown here. This is a simple widget that shows the video rate:

You can give it a variety of styles, such as classic dark mode or light mode. So what are its properties? Let’s take a lookinterface.tsFile:

import { TextStyle, ViewStyle } from 'react-native';

export interface VideoBitProps {
  // Container style
  containerStyle: ViewStyle;
  // Text background style
  bitTxtBoxStyle: ViewStyle;
  // Rate unit style
  unitStyle: TextStyle;
  // Rate style
  valueStyle: TextStyle;
  // Speed (custom)
  bitValue: string | undefined;
  // Unit of speed
  unit: string;
}
Copy the code

The following attributes are defined for the component:

2. Component implementation

Let’s take a look at the entire code module: the index.tsx file

import React, { useState, useEffect } from 'react';
import _ from 'lodash';
import { View, Text } from 'react-native';
import Styles from './style';
import TYIpcPlayerManager from '.. /ty-ipc-native';
import { VideoBitProps } from './interface'

const VideoBit: React.FC<VideoBitProps> & {
  defaultProps: Partial<VideoBitProps>;
} = props= > {
  const [bitRateValue, setBitRateValue] = useState(' ');
  const { containerStyle, bitTxtBoxStyle, valueStyle, unitStyle, bitValue, unit } = props;
  let timer = null;
  useEffect(() = > {
    convertBitRate();
    return () = > {
      clearInterval(timer); }; } []);const convertBitRate = () = > {
    getBitValue();
    timer = setInterval(() = > {
      getBitValue();
    }, 3000);
  };
  
  const getBitValue = () = > {
    TYIpcPlayerManager.getVideoBitRateKBPS()
      .then(data= > {
        if (data) {
          const realBit = (+data).toFixed(0);
          setBitRateValue(realBit);
        }
      })
      .catch(err= > {
        clearInterval(timer);
      });
  };

  return (
    <View style={[Styles.videoBitContainer, containerStyle]} >{(bitRateValue ! == undefined) || (bitValue ! == undefined ) ? (<View style={[Styles.bitTxtBox, bitTxtBoxStyle]} >
          <Text style={[Styles.fontContainer, valueStyle]} >
            {bitRateValue || bitValue}{` `}
            <Text style={[Styles.fontContainer, unitStyle]} >{unit}</Text>
          </Text>
        </View>
      ) : null}
    </View>
  );
};

VideoBit.defaultProps = {
  containerStyle: {},
  bitTxtBoxStyle: {},
  valueStyle: {},
  unitStyle: {},
  unit: 'kb/s'.bitValue: undefined};export default VideoBit;

Copy the code

3. Component usage examples

   const NormalTopRight = () = > {
    return (
      <VideoBit
        bitValue="20"
        unit="m/s"
        unitStyle={{ color: 'black'}}containerStyle={{ position: 'absolute', left: 20.top: 50}} / >
    );
  };
Copy the code

Unit testing

VideoBit. Test. Ts file:

import React from 'react';
import { shallow } from 'enzyme';
import VideoBit from '.. /index';

describe('VideoBit components'.() = > {
  it('basic render'.() = > {
    const wrapper = shallow(
      <VideoBit containerStyle={{ position: 'absolute', right: 0.top: 30}} / >
    );
    expect(wrapper).toMatchSnapshot();
  });
  it('container render'.() = > {
    const wrapper = shallow(<VideoBit valueStyle={{ color: 'red', fontSize: 24}} / >);
    expect(wrapper).toMatchSnapshot();
  });
  it('bitTxtBox render'.() = > {
    const wrapper = shallow(<VideoBit bitTxtBoxStyle={{ width: 100.height: 30}} / >);
    expect(wrapper).toMatchSnapshot();
  });
  it('unit render'.() = > {
    const wrapper = shallow(<VideoBit unitStyle={{ color: 'black' }} />);
    expect(wrapper).toMatchSnapshot();
  });
  it('bit data'.() = > {
    const wrapper = shallow(<VideoBit bitValue={30} />);
    expect(wrapper).toMatchSnapshot();
  });
  it('unit data'.() = > {
    const wrapper = shallow(<VideoBit unit="m/s" />);
    expect(wrapper).toMatchSnapshot();
  });
});

Copy the code