mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Luna Wei
a77d8d9d50
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/47908 Changelog: [General][Added] - Add support for `rn_rootThreshold` in Intersection Observer `rn_rootThreshold` is a custom IntersectionObserver option and not part of the IntersectionObserver spec. We are adding it because it covers a specific use-case for measuring viewability that is robust for `target`s that are larger than the viewport or specified `root`. The threshold ratio is of the intersection area (of `root` and `target`) to the total area of the `root`. {F1960832959} Source - EX314979 `rn_rootThreshold` is an optional threshold and can be combined with the `thresholds` option. An intersection will fire if any specified thresholds is met. Note: If you use specify a `rn_rootThreshold`, the default `threshold` is no longer applied The main use case of `rn_rootThreshold` is being able to specify a level of viewability independent of `target` size. For example, a `target` that is larger than the `root` (commonly the viewport) will not trigger the IntersectionObserver for a `threshold` of `1`. Setting `rn_rootThreshold` of `1`, will trigger once the item takes full size of the `root`.'; Reviewed By: yungsters Differential Revision: D66031119 fbshipit-source-id: 7bdc871dc5b4e6c0edc7d6e17a0a0cfd51c4fe81
28 lines
1010 B
JavaScript
28 lines
1010 B
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
import * as IntersectionObserverBenchmark from './IntersectionObserverBenchmark';
|
|
import * as IntersectionObserverMDNExample from './IntersectionObserverMDNExample';
|
|
import * as IntersectionObserverRootThreshold from './IntersectionObserverRootThreshold';
|
|
|
|
export const framework = 'React';
|
|
export const title = 'IntersectionObserver';
|
|
export const category = 'UI';
|
|
export const documentationURL =
|
|
'https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API';
|
|
export const description =
|
|
'API to detect paint times for elements and changes in their intersections with other elements.';
|
|
export const showIndividualExamples = true;
|
|
export const examples = [
|
|
IntersectionObserverMDNExample,
|
|
IntersectionObserverBenchmark,
|
|
IntersectionObserverRootThreshold,
|
|
];
|