README.md

hippy-vue-intersection-observer

hippy-vue-intersection-observer is a Hippy-Vue implementation of Intersection Observer.

It provides an easier way to detect view exposure in complex application.

Note: This component is inspired by and adapted from 'rn-intersection-observer'

Install

# Install using Yarn:
yarn add hippy-vue-intersection-observer

# or NPM:
npm install -S hippy-vue-intersection-observer

Usage

Target view

<hippy-vue-observer
  scope="YourOwnScope"
  :thresholds="[0.2, 0.5]"
  @on-change="onIntersectionChange"
>
{/* your own view */}
</hippy-vue-observer>


<script>

import { HippyVueObserver, HippyIntersectionEmitEvent } from "hippy-vue-intersection-observer";

// register hippy-vue-observer before use
Vue.use(HippyVueObserver);

// ...

export default {
  // ...
  methods: {
    onIntersectionChange(entry) {
      console.log(entry);
    },
  },
  
}

</script>

Trigger detection from Vue

methods: {
    onScroll(e) {
      HippyIntersectionEmitEvent("myScope");
    },
}

Trigger detection from Native

HippyMap hippyMap = new HippyMap();
hippyMap.pushString("scope", "YourOwnScope");
mEngineManager.getCurrentEngineContext()
    .getModuleManager()
    .getJavaScriptModule(EventDispatcher.class)
    .receiveNativeEvent("IntersectionObserverEvent", hippyMap);

// 可参考HippyEventObserverModule.m
[self sendEvent:@"IntersectionObserverEvent" params:@{ @"scope": @"YourOwnScope" }];
- (void)sendEvent:(NSString *)eventName params:(NSDictionary *)params {
    HippyAssertParam(eventName);
    [self.bridge.eventDispatcher dispatchEvent:@"EventDispatcher" 
                                    methodName:@"receiveNativeEvent" 
                                          args:@{@"eventName": eventName, @"extra": params ? : @{}}];
}

Props & Params

1) IntersectionObserver / hippy-vue-observer

Props	Params Type	Description
scope	string	Scope of the target View, required in event trigger.
rootMargin	{top: number, left: number, bottom: number, right: number}	Distance from screen edge of detect area.
thresholds	number[]	Intersection ratios which should trigger intersection callbacks.
throttle	number	Throttle time between each detection(ms).

2) Intersection Callback (on-change)

Different from IntersectionObserver, hippy-vue-observer provides single parameter.

Params	Params Type	Description
boundingClientRect	{top: number, left: number, bottom: number, right: number}	Position of target View's edge.
intersectionRatio	number	Intersection ratio of target View in detect area
intersectionRect	{top: number, left: number, bottom: number, right: number}	Position of intersection area's edge.
target	Ref	Ref of target View
isIntersecting	boolean	Determine current intersection ratio is larger than any threshold.

License

ISC