English | 简体中文

@ray-js/outdoor-gps-signal

Components of GPS signal

Installation

$ npm install @ray-js/outdoor-gps-signal
# or
$ yarn add @ray-js/outdoor-gps-signal

Develop

# install deps
yarn

# watch compile demo
yarn start:tuya

Usage

import React from 'react';
import OutdoorGpsSignal from '@ray-js/outdoor-gps-signal';

export default function Home() {
  return (
    <>
      {/* light mode */}
      <View>
        <OutdoorGpsSignal gpsValue={10} min={0} max={100} />
        <OutdoorGpsSignal gpsValue={30} min={0} max={100} />
        <OutdoorGpsSignal gpsValue={50} min={0} max={100} />
        <OutdoorGpsSignal gpsValue={70} min={0} max={100} />
        <OutdoorGpsSignal gpsValue={100} min={0} max={100} />
      </View>
      {/* Dark Mode */}
      <View>
        <OutdoorGpsSignal gpsValue={10} theme="dark" min={0} max={100} />
        <OutdoorGpsSignal gpsValue={30} theme="dark" min={0} max={100} />
        <OutdoorGpsSignal gpsValue={50} theme="dark" min={0} max={100} />
        <OutdoorGpsSignal gpsValue={70} theme="dark" min={0} max={100} />
        <OutdoorGpsSignal gpsValue={100} theme="dark" min={0} max={100} />
      </View>
      {/* Custom width and height */}
      <View>
        <OutdoorGpsSignal
          gpsValue={50}
          min={0}
          max={100}
          style={{ width: '15px', height: '15px' }}
        />
        <OutdoorGpsSignal
          gpsValue={50}
          min={0}
          max={100}
          style={{ width: '30px', height: '30px' }}
        />
      </View>
    </>
  );
}