# intersection-observer
React to a component coming into view using Reflex event handler.
## Installation
```bash
pip install reflex-intersection-observer
```
## Usage
```python
import reflex as rx
from reflex_intersection_observer import intersection_observer
def index():
return rx.vstack(
rx.box(height="150vh"),
intersection_observer(
on_intersect=rx.console_log,
),
)
```
See [intersection_observer_demo](./intersection_observer_demo/) app for further examples.
### Props
The following props are understood by `intersection_observer`:
* `root` - ID of the element that is used as the viewport for checking
visibility of the target. Must be the id of a parent of the target. Default is
the browser viewport.
* `root_margin` - An offset rectangle applied to the root's bounding box when
calculating intersections, effectively shrinking or growing the root for
calculation purposes. The value returned by this property may not be the same
as the one specified when calling the constructor as it may be changed to
match internal requirements. Each offset can be expressed in pixels (px) or as
a percentage (%). The default is "0px 0px 0px 0px".
* `threshold` - value between 0 and 1 indicating the percentage that should be
visible before the event is triggered. Default is 1.
The following events are emitted by `intersection_observer`:
* `on_intersect` - fired when the target element intersects with the root element.
* `on_non_intersect` - fired when the target element does not intersect with the root element.
Both of these events provide an `IntersectionObserverEntry` with intersection details:
* `intersection_ratio`: how much of the target element is intersection (0 - 1).
* `is_intersecting`: true/false based on whether the observer is intersecting or not
* `time`: relative timestamp when the intersection occured
See [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)
docs on MDN for more information about how the API works.
Raw data
{
"_id": null,
"home_page": null,
"name": "reflex-intersection-observer",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "reflex, reflex-custom-components",
"author": null,
"author_email": "Masen Furer <m_github@0x26.net>",
"download_url": "https://files.pythonhosted.org/packages/6b/ec/bf3536466b6e2f9cdb1964d26c3a4665c77990db3bba9a7a8795e5874377/reflex_intersection_observer-0.0.5.tar.gz",
"platform": null,
"description": "# intersection-observer\n\nReact to a component coming into view using Reflex event handler.\n\n## Installation\n\n```bash\npip install reflex-intersection-observer\n```\n\n## Usage\n\n```python\nimport reflex as rx\n\nfrom reflex_intersection_observer import intersection_observer\n\ndef index():\n return rx.vstack(\n rx.box(height=\"150vh\"), \n intersection_observer(\n on_intersect=rx.console_log,\n ),\n )\n```\n\nSee [intersection_observer_demo](./intersection_observer_demo/) app for further examples.\n\n### Props\n\nThe following props are understood by `intersection_observer`:\n\n* `root` - ID of the element that is used as the viewport for checking\n visibility of the target. Must be the id of a parent of the target. Default is\n the browser viewport.\n* `root_margin` - An offset rectangle applied to the root's bounding box when\n calculating intersections, effectively shrinking or growing the root for\n calculation purposes. The value returned by this property may not be the same\n as the one specified when calling the constructor as it may be changed to\n match internal requirements. Each offset can be expressed in pixels (px) or as\n a percentage (%). The default is \"0px 0px 0px 0px\".\n* `threshold` - value between 0 and 1 indicating the percentage that should be\n visible before the event is triggered. Default is 1.\n\nThe following events are emitted by `intersection_observer`:\n\n* `on_intersect` - fired when the target element intersects with the root element.\n* `on_non_intersect` - fired when the target element does not intersect with the root element.\n\nBoth of these events provide an `IntersectionObserverEntry` with intersection details:\n\n* `intersection_ratio`: how much of the target element is intersection (0 - 1).\n* `is_intersecting`: true/false based on whether the observer is intersecting or not\n* `time`: relative timestamp when the intersection occured\n\nSee [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)\ndocs on MDN for more information about how the API works.\n",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "Reflex custom component intersection-observer",
"version": "0.0.5",
"project_urls": {
"Homepage": "https://github.com/masenf/reflex-intersection-observer"
},
"split_keywords": [
"reflex",
" reflex-custom-components"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "ca7d0c3c1eaef019c648892cd90634bac9b69054dbdf1070ffba71002c116233",
"md5": "2668ccf885ea2abb8c0347f9397ce4e7",
"sha256": "3a2e73e38130fcea92bedbe6d3e5a168db70d99335cf83dc2129f028c433f8c1"
},
"downloads": -1,
"filename": "reflex_intersection_observer-0.0.5-py3-none-any.whl",
"has_sig": false,
"md5_digest": "2668ccf885ea2abb8c0347f9397ce4e7",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 4093,
"upload_time": "2024-12-17T23:52:51",
"upload_time_iso_8601": "2024-12-17T23:52:51.768090Z",
"url": "https://files.pythonhosted.org/packages/ca/7d/0c3c1eaef019c648892cd90634bac9b69054dbdf1070ffba71002c116233/reflex_intersection_observer-0.0.5-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "6becbf3536466b6e2f9cdb1964d26c3a4665c77990db3bba9a7a8795e5874377",
"md5": "21112565438df5333487eff2a2be86d7",
"sha256": "0a7fd4351d0227c897c76e364d0913c4e5faf1d867e36365ff62e1519d1e74c4"
},
"downloads": -1,
"filename": "reflex_intersection_observer-0.0.5.tar.gz",
"has_sig": false,
"md5_digest": "21112565438df5333487eff2a2be86d7",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 3760,
"upload_time": "2024-12-17T23:52:52",
"upload_time_iso_8601": "2024-12-17T23:52:52.705067Z",
"url": "https://files.pythonhosted.org/packages/6b/ec/bf3536466b6e2f9cdb1964d26c3a4665c77990db3bba9a7a8795e5874377/reflex_intersection_observer-0.0.5.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-12-17 23:52:52",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "masenf",
"github_project": "reflex-intersection-observer",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "reflex-intersection-observer"
}
JSON
